How to fix import / no-unresolved eslint to look at package.json "module" instead of "main"

Question

I'm currently importing a yarn workspace package that has the module field defined in ES6 and linting with the plugin eslint-plugin-import

My create-react-app setup automatically uses the module through webpack but eslint is complaining that @mycompany/utils package is undefined.

Unable to resolve path to module '@mycompany/utils'. [import/no-unresolved]

So my question is how do I get my linter to look at the module path instead of main

This is my package.json for the utils package

{
  "name": "@mycompany/utils",
  "version": "0.0.2",
  "main": "dist/index.js",
  "module": "src/index.js"
}

Answer 1

• install eslint-import-resolver-webpack as a dev-dependency https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack
• Update your settings in your .eslintrc

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["react"],

  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "modules": ["node_modules"]
          }
        }
      }
    }
  }
}

What this does is that it updates your eslint-plugin-import to resolve using webpack instead of node. In the webpack resolver it'll automatically look at your module over main first.

https://github.com/benmosher/eslint-plugin-import/blob/master/resolvers/webpack/index.js#L200