eslint-plugin-import Unable to resolve path to module

Original https://github.com/zhbhun/blog/issues/1

eslint-plugin-import is used to check the import and export code of ES Module to prevent the problem of misspelled file paths and import names.

Install and use

1. Install

    npm install --save-dev eslint eslint-plugin-import

2. Configuration: .eslintrc

   • recommend:

      {
         "extends": ["plugin:import/recommended"],
         "plugins": "eslint-plugin-import"
     }

   • TypeScript:

      {
         "extends": [
             "plugin:import/recommended",
             "plugin:import/typescript"
         ],
         "plugins": "eslint-plugin-import"
     }

     ps: need additional installation @typescript-eslint/parser and eslint-import-resolver-typescript

Module resolution

We often encounter the problem that the module cannot be resolved after introducing the eslint-plugin-import plugin.

 Unable to resolve path to module '.../xxx'  import/no-unresolved

The following situations usually occur.

1. When a jsx or vue module is introduced, the extension is missing, and ESLint warns that the module cannot be found;

    import Button from "./Button"; // Button.jsx
   // Unable to resolve path to module './Component'

   eslint-plugin-import follows node's module parsing method by default. A module without a suffix name will first check whether there is a .js file. If not, it will check whether there is a directory with the same name, and check whether the directory has package.json or index.js. To fix this, we need to modify the extension configuration of the eslint-plugin-import default parser.

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

2. If the module alias of a packaging tool such as webpack is used, ESLint prompts that the module cannot be found;

    import Button from "@/components/Button";

   As mentioned above, eslint-plugin-import follows node's module resolution by default, and does not support webpack's aliases. But eslint-plugin-import's module resolution is extensible. To solve this problem, we just need to install the dependency eslint-import-resolver-alias and configure it as follows:

    {
     "settings": {
       "import/resolver": {
         "alias": {
           "map": [["@", "./src"]],
           "extensions": [".js", ".jsx"]
         }
       }
     }
   }

   ps: The path of the map is relative to the root directory of the IED project. If eslintrc is not in the root directory, it is recommended to use js instead to configure the absolute path ( path.resolve(__dirname, 'src') ).

3. No dependency check will be performed when importing code modules with non-js extensions such as jsx;

    // Component.jsx
   export const name = "Component";
   
   // index.js
   import Component from "./Component.jsx";

   As shown in the code above, Component does not export the default module, but index.js is imported as a default module. In theory, eslint should warn No default export found in imported module "./Component.jsx"/

   This problem occurs because eslint-plugin-import will only verify the module code of the js extension by default. You can adjust the extensions supported by the module as follows:

    {
       "settings": {
           "import/extensions": [".js", ".jsx"]
       }
   }

Detailed configuration

import/extensions

Modules with the extension import/extensions will be parsed as ES Module, and the export of the target module will be checked. The default is ['.js'] .

 {
  "settings": {
    "import/extensions": [
      ".js",
      ".jsx"
    ]
  }
}

If a module that is not in the extension's scope is imported, you can use named import or use default import, eslint-plugin-import will not check, otherwise it will be checked.

 // Button.js
export default () => null

// Button.css
.button {}

// index.js
import ButtonCSS, { ButtonMainCSS } from './Button.css' // eslint-plugin-import ignore css module
import Button, { ButtonMain } from './Button.js' // `ButtonMain not found in './Component.jsx'`

import/ignore

Contrary to import/extensions , it is used to configure which modules are not recognized as ESModule, for example: css, scss and less etc.

import/core-modules

import/core-modules is used to set which core modules are used in the current project. By default, the fs, path and other modules of Nodejs are built-in. In this way, when using these modules, there will be no unresolve

import/resolver

eslint-plugin-import implements a module identification mechanism similar to Node.js by default, but it often cannot support various front-end packaging environments, such as: alias modules of webpack, custom extensions of different frameworks or languages, so eslint- plugin-import opens up the custom configuration of the resolver, and a custom module resolver can be implemented by third-party extensions.

• Module alias: eslint-import-resolver-alias
• TypeScript: eslint-import-resolver-typescript