Error: Unable to locate module pathway in eslint/typescript configuration

My .eslintrc.json configuration is:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true,
        "jest": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier",
        "import"
    ],
    "extends": [
        "airbnb",
        "airbnb/hooks",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:import/typescript",
        "prettier"
    ],
    "root": true,
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1,
        "import/extensions": 0,
        "react/jsx-filename-extension": 0,
        // note you must disable the base rule as it can report incorrect errors
        "no-shadow": 0,
        "@typescript-eslint/no-shadow": [
            1
        ],
        "no-unused-vars": 0,
        "@typescript-eslint/no-unused-vars": 1,
        "no-undef": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "jsx-a11y/no-static-element-interactions": 0,
        "@typescript-eslint/explicit-module-boundary-types": 0,
        "react/button-has-type": 0,
        "react/require-default-props": 0,
        "react/prop-types": 0,
        "react-hooks/exhaustive-deps": 0,
        "react/jsx-props-no-spreading": 0
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".ts",
                    ".tsx"
                ]
            }
        }
    }
}

In a file 

src/components/elements/ProtectedRoutes/InviteRoute.tsx
, I have:

import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';

The application runs fine, but when I execute linting, I receive the following errors:

  2:24  error  Unable to resolve path to module 'constants/routeNames'    import/no-unresolved
  3:22  error  Unable to resolve path to module 'hooks/roles'             import/no-unresolved
  5:22  error  Unable to resolve path to module 'shared/src/types/enums'  import/no-unresolved

What could be causing these errors?

javascripttypescripteslintlint

Answer №1

To ensure your ts / tsx files can be imported without the extension, it is recommended to include this configuration in your eslint settings. It is crucial to specify the module directory to accurately resolve paths within the ./src directory. If the module cannot be found in src, the search will extend to node_modules.

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".ts", ".tsx"],
      "moduleDirectory": ["src", "node_modules"]
    }
  }
}

Answer №2

If you encounter this issue within a monorepo while using VSCode, it is likely due to ESLint searching for the tsconfig file in the wrong directory. To fix this, you can create a .vscode/settings.json file with specific configurations.

For instance, let's say your project is located at workspaces/server:

{
  "eslint.workingDirectories": [
    { "directory": "workspaces/server", "changeProcessCWD": true },
  ]
}

This setup informs ESLint about all the various sub-project folders.

Answer №3

If you have specified custom paths in your TypeScript configuration file (typically named tsconfig.json), the import plugin may not be able to resolve these paths correctly. To fix this issue, you should indicate the correct path to your TypeScript configuration file using the project parameter within the resolver options:

{
    ...
    "settings": {
        "import/resolver": {
            "project": "./my-path-to/tsconfig.json",
            ...
        }
    }
}

If your tsconfig.json is located at the root of your repository, you can set it as follows: "project": {}. For more details, refer to this GitHub discussion: https://github.com/import-js/eslint-plugin-import/issues/1485

Answer №4

For TypeScript users, make sure to add the .d.ts extension to your list of extensions.

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".ts", ".tsx", ".d.ts"], // don't forget .d.ts
      "moduleDirectory": ["src", "node_modules"]
    }
  }
}

In my case, a dependency only had .d.ts files and the suggested solution was not effective.

The issue was resolved by including .d.ts in the extensions list.

Answer №5

If it's of any assistance, I encountered a similar issue in a create-react-app project that didn't involve TypeScript. To resolve it, I had to include the current directory in the moduleDirectory field as shown below.

In my .eslintrc.json, I made the following addition. It's worth noting that my project doesn't use TypeScript files:

"settings": {
"import/resolver": {
    "node": {
      "extensions": [".js", ".jsx"],
      "moduleDirectory": [".", "node_modules"]
    }
  }
}

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

Changing global properties in VueCli

Recently, I integrated a component library into my Vue 3 project. All instances of the component require the same styles. Instead of manually adjusting each instance's props, I opted to utilize a global property: app.config.globalProperties.$tooltipS ...

javascriptvue.jsvuejs3

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

javascripthtmlcordova

In React/JavaScript, the array variable defined outside the component is having props added to it multiple times

After entering new data, I want to add it to an array called DUMMY_MEALS outside the component and display it as a list. The issue I am facing is that the 'data' object is being added multiple times to DUMMY_MEALS and rendering duplicates on the ...

javascriptreactjscomponents

React-native - Dropdownpicker - Error: Unable to retrieve label for selected choice

I'm encountering an issue with DropDownPicker in my react-native project during page load Here is the code snippet where I am using DropDownPicker: <DropDownPicker items={[ { la ...

javascriptreactjsreact-native

Looking for ways to enhance the readability of JSON in your React-Typescript application?

After completing Stephen Grider's React and Typescript course on Udemy, I developed the JBook app. One of the challenges I encountered was ensuring that the content from a user's local file is displayed clearly in JBook. Currently, all content is ...

reactjsnode.jsjsontypescript

The package.json could not be parsed due to an error

I am currently facing an issue while trying to deploy a JavaScript Node.js project on Heroku. Everything works fine on localhost, but upon uploading, I encounter an "unable to parse" error at : ... "engines" : { "node" : ">0.11.9" }, ... The Error Mes ...

javascriptjsonnode.js

Having trouble launching Cypress on my Mac - stating that it cannot find Cypress

Despite searching through multiple answers on S.O, none of them have solved my issue. To better explain my question, I've created a video. You can view it here Everything was working perfectly just yesterday, so what could have possibly gone wrong? ...

javascriptnpmautomated-testscypress

Using the GUI builder in Google App Script to include list box elements

Just starting out with javaScript and could use some guidance on using App Script. I've inserted a list box called "List Stocks" in GUI Builder, alongside a function named "listStockQuotes()" in Events. However, I'm unsure of how to add elements ...

javascriptlistboxgoogle-apps-script

Securing client-side code with AngularJS for enhanced security

It's a known fact that once browsers have downloaded frontend files, there's no way to hide code from the client. However, I've heard that clients can debug JavaScript code, add breakpoints, skip code lines (especially security checks), and ...

javascriptangularjsssl

Middleware for Redux in Typescript

Converting a JavaScript-written React app to Typescript has been quite the challenge for me. The error messages are complex and difficult to decipher, especially when trying to create a simple middleware. I've spent about 5 hours trying to solve an er ...

reactjstypescriptredux

Combining nested Observables within an outer array without using inner subscribe (RxJS)

Looking at the TypeScript functions below, which are used for async HTTP-Calls: public retrieveAllMembersIdsFromGroup(groupId: string): Observable<string[]> public retrieveMember(memberId: string): Observable<Member> How can these be combined ...

angulartypescriptrxjsnestedobservable

Ways to call a method in a subclass component from a functional parent component?

In my redux-store, I have objects with initial values that are updated in different places within the child component. As the parent, I created a stateless functional component like this: const Parent = () => { const store = useSelector(state => s ...

javascriptreactjsreact-reduxreact-hooks

Transferring Sound file between Django and Vue

I am attempting to transfer a audio file that was generated by gtts from Django to Vue using HttpResponse. In the views.py file of Django: f = open('path/of/mp3/file', 'rb') response = HttpResponse() response.write(f.read()) response[& ...

javascriptpythondjangovue.js

Adding HTML elements dynamically using jQuery: A how-to guide

My objective is to start with one element upon loading the page, and this element should have an ID of "something_O". When the user clicks on an add link, a new identical HTML element should be added underneath the existing element. The new element should ...

javascriptjqueryhtmljquery-uidom

What causes the ongoing conflict between prototype and jquery?

I have researched how to effectively load both prototype and jQuery together, but the solutions I found did not resolve my issue. My current setup involves loading jQuery first, followed by this specific file: http:/music.glumbo.com/izzyFeedback.js, and t ...

javascriptjqueryprototypejsconflict

Remove an element from an array within an object stored in a MongoDB document

Greetings and thank you for taking the time to read my query! I am currently diving into the world of coding, and here's my first question on this platform: I have a MongoDB collection structured similarly to the example below. Each document represe ...

javascriptnode.jsmongodbmongoosemongodb-query

Preventing the rest of the code from running with Javascript block

I recently integrated the colReorder extension with datatables, which seemed to work well. However, I encountered an issue where it caused my ajax calls in the JavaScript file to break, and I'm struggling to pinpoint the reason for this malfunction. ...

javascriptjquerydatatables

Utilize a JavaScript function to transform a single Unicode character into another representation

Objective: When clicked, update the arrow to face downwards. I attempted using a different unicode character in my JavaScript code to achieve this change, but I kept receiving the basic string even after trying to escape it with "\"... Feeling a bit ...

javascriptjqueryunicode

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Can someone assist me in displaying 6 images retrieved from a MySQL database on an MVC Razor view? Images 1 and 6 should be placed in separate divs labeled "item", while images 2, 3, 4, and 5 should be grouped together in a div called "item-small". Below i ...

javascriptjquerycssasp.net-mvc-4razor

What is causing this code to malfunction in AngularJS version 1.2?

Check out this code snippet I wrote using Angular 1.2: http://jsfiddle.net/VmkQy/1/ <div ng-app="app"> Title is: <span my-directive data-title="Test title">{{ title }}</span> </div> angular.module('app', []) .dir ...

javascriptangularjsangularjs-directive