Issue encountered: Inability to locate the module or its associated type declarations while working with a monorepo and @typescript

This problem seems straightforward, but finding a solution has been tricky...

Whenever I try to use @typescript-eslint/utils, I encounter the error message

Cannot find module @typescript-eslint/utils or its corresponding type declarations
.

Here is the structure of the project:

.
├── packages/
│   └── eslint-plugin-foo/
│       ├── node_modules/
│       │   └── @typescript-eslint/
│       │       └── utils
│       ├── src/
│       │   └── rules/
│       │       └── some-rule.ts
│       └── tsconfig.json
└── tsconfig.json

In the file some-rule.ts, the package is being imported like this:

// some-rule.ts

// error: Cannot find module @typescript-eslint/utils or its corresponding type declarations. ts(2307)
import { ESLintUtils, TSESTree } from '@typescript-eslint/utils';
                                       ~~~~~~~~~~~~~~~~~~~~~~~~

...

Here is the structure of the package:

.
└── node_modules/
    └── @typescript-eslint/
        └── utils/
            ├── dist/
            │   ├── index.d.ts
            │   ├── index.js
            │   └── ...
            └── package.json

Below is the package.json of @typescript-eslint/utils:

{
  "name": "@typescript-eslint/utils",
  "version": "6.8.0",
  "files": [
    "dist",
    "_ts4.3",
    "package.json",
    "README.md",
    "LICENSE"
  ],
  "type": "commonjs",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "./ast-utils": {
      "types": "./dist/ast-utils/index.d.ts",
      "default": "./dist/ast-utils/index.js"
    },
    ...
  },
  "dependencies": {
    "@eslint-community/eslint-utils": "^4.4.0",
    ...
  },
  ...
}

After changing the import to @typescript-eslint/utils/dist, the initial error disappears. However, a new error appears when running the test:

Package subpath './dist' is not defined by "exports" in somepath/packages/eslint-plugin-foo/node_modules/@typescript-eslint/utils/package.json

How can I go about resolving this issue?

Answer №1

For more information on the issue with '@typescript-eslint/*' module, check out this important post on the typescript-eslint issue tracker:

Cannot find module '@typescript-eslint/*' or its corresponding type declarations
.

Explanation: The lack of support for Node versions prior to 16 in the latest v6 release is a deliberate decision and not a bug. This change was made due to the end-of-life status of those older Node versions. The new package.json exports in v6 necessitate Node 16+ for compatibility and are incompatible with the older module resolution method.

Solution: To resolve this issue, update your TSConfig's module resolution to a newer option such as "bundler", "node16", or "nodenext". Refer to the aka.ms/tsconfig "moduleResolution" documentation for detailed guidance.

For further insights, explore TypeScript's updated modules reference documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

What is the reason behind Flow's reluctance to infer the function type from its return value?

I was anticipating the code to undergo type checking within Flow just like it does within TypeScript: var onClick : (() => void) | (() => boolean); onClick = () => { return true; } However, I encountered this error instead: 4: onClick = () => ...

Getting the Full Error Message in Axios with React Native Expo

I'm encountering a network error while using Axios with React Native. Previously, when working with React JS on the web, I could console log the error or response and see all the details. However, in Expo, all I get is "Axios error: Network error" wh ...

Creating Dynamic ion-card Elements in Typescript by Programmatically Changing Values

Currently, I am working on a basic app that retrieves posts from the server and displays them as cards on the screen. At this early stage, one of my main challenges is figuring out how to dynamically add ion-card elements with changing content and headers ...

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

Encountered a problem while testing the Material-UI Slider with React-Test-Renderer: Uncaught [TypeError: Cannot read property 'addEventListener' of null] Codesandbox Link import React from "react"; import { Slider } from "@materi ...

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

Remove an element from an array within objects

Need help with removing specific items from an array within objects? If you want to delete all hobbies related to dancing, you may consider using the splice method const people = [{ id: 1, documents: [{ ...

The configuration object is invalid. Webpack has been initialized with a configuration object that does not conform to the API schema

I recently created a basic helloworld react app through an online course, but I encountered the following error: Invalid configuration object. Webpack has been initialized with a configuration object that does not adhere to the API schema. - configur ...

Using Jest and Typescript to mock a constant within a function

Just getting started with Jest and have a question: Let's say I have a function that includes a const set to a specific type (newArtist): export class myTestClass { async map(document: string) { const artist: newArtist = document.metadat ...

Confirming changes to checkbox values in Angular 2 prior to updating

My current challenge involves implementing a confirmation dialog in my application, and I'm feeling a bit unsure about the logic behind it. UserDetailsComponent.ts import { Component, OnInit, OnDestroy, ViewChild, Input, OnChanges, SimpleChange } f ...

Resolving the Duplicate Identifier Issue in Ionic 2 with Firebase Integration

I'm struggling with setting up ionic2 + Firebase 3. Following a tutorial, I installed Firebase and Typings using the commands below: npm install firebase --save npm install -g typings typings install --save firebase However, when I try to run ioni ...

Tips for executing Firebase transactions involving read operations subsequent to write operations

Is there a method to incorporate read operations following write operations in nodejs for cloud and background functions? According to the information provided in the documentation, only server client libraries allow transactions with read operations afte ...

Can you use `keyof` to create a template literal type?

Defined a form schema type example: type FormSchema = { username: string; settings: { theme: string; language: string } } Now, trying to define the Form Input type like this: type FormInput = { id: keyof FormSchema | `${keyof FormSchema}.${string}` } Enc ...

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

I am currently utilizing the Material UI library in combination with React and Typescript. Whenever I attempt to pass a conditional boolean as the "button" prop of the component, I encounter a typescript error stating: Type 'boolean' is not assi ...

Angular 2: A guide to setting up `--module system --experimentalDecorators` flags in your project

I am encountering an issue while compiling my TypeScript file: app/app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>Messenger</h1>' }) export clas ...

"Error: The property $notify is not found in the type" - Unable to utilize an npm package in Vue application

Currently integrating this npm package for notification functionalities in my Vue application. Despite following the setup instructions and adding necessary implementations in the main.ts, encountering an error message when attempting to utilize its featur ...

Striking through the value of a Material-UI TextField variant label

For my project, I attempted to implement the TextField component from Material-UI in the outlined variant. However, I encountered an issue where the label overlaps with the value. How can I resolve this issue? Check out this screenshot showing the mixed-u ...

What is the importance of using ChangeDetectorRef.detectChanges() in Angular when integrating with Stripe?

Currently learning about integrating stripe elements with Angular and I'm intrigued by the use of the onChange method that calls detectChanges() at the end. The onChange function acts as an event listener for the stripe card, checking for errors upon ...

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

Unexpected expression after upgrading to TypeScript 3.7.2 was encountered, file expected.ts(1109)

After updating TypeScript from version 3.6.x to 3.7.2, I started using optional chaining in my code. However, I encountered a peculiar error. Error message: Expression expected.ts(1109) This error appeared in both my (vim, VSCode) IDE, even though the ...