Eslint-plugin-import: no-unresolved error when linting using eslint-import-resolver-webpack

Created on 22 Mar 2018 · 7Comments · Source: benmosher/eslint-plugin-import

I installed eslint-plugin-import/resolver-webpack so I could correctly resolve webpack aliases using eslint.

Before setting up eslint-plugin-import and eslint-import-resolver-webpack I would just get this error due to eslint not being able to resolve an alias I set up in webpack.
Unable to resolve path to module 'src/picture.jpg

Now I get a ton of errors am I doing something wrong? I've googled and looked through issues for the last couple hours but can't figure out what I'm missing.

package.json:
``` "webpack": "3.8.1",
"eslint": "^3.12.0",
"eslint-import-resolver-webpack": "~0.8.4",
"eslint-plugin-import": "^2.9.0",
"webpack": "3.8.1",

.eslintrc:

"plugins": [
    "react",
    "import"
],
"settings": {
    "import/resolver": {
        "webpack": {
            "config": "webpack.config.js"
        }
    }
}

webpack.config.js:
```    resolve: {
        alias: {
            'src': path.resolve(__dirname, 'src')
        }

Source

Yahkob

👍2

Most helpful comment

@nicolascbarbosa At first, I exported my config like this :

module.exports = (env) => {
  switch (env) {
    case 'production':
      return merge(commonConfig, productionConfig);
    case 'staging':
      return merge(commonConfig, stagingConfig);
    case 'development':
      return merge(commonConfig, developmentConfig);
    default:
      return {};      // <- this is the problem
  }
};

since eslint won't provide any "env" to the webpack.config.js, so the exported config is {}，the “alias” key was not exists, so eslint don't have any knowledge of your custom path resolve plan. so, I changed my code to ：

module.exports = (env) => {
  switch (env) {
    case 'production':
      return merge(commonConfig, productionConfig);
    case 'staging':
      return merge(commonConfig, stagingConfig);
    default:
      return merge(commonConfig, developmentConfig);
  }
};

then, everything gose fine.

JoeHetfield on 29 Mar 2018

❤2 🎉1

All 7 comments

Are your files using .jsx extension?

DominicTobias on 28 Mar 2018

I got same issue, then I fond I put some env-sensitive code in the webpack.config.js that make it exported an empty config object. so the eslint couldn't get any info about alias.
I suggest check the way you export your webpack config object.

JoeHetfield on 28 Mar 2018

👍2

@JoeHetfield Can you give an example here, please? there are many people looking for this solution on the web

nicolascbarbosa on 29 Mar 2018

@nicolascbarbosa At first, I exported my config like this :

module.exports = (env) => {
  switch (env) {
    case 'production':
      return merge(commonConfig, productionConfig);
    case 'staging':
      return merge(commonConfig, stagingConfig);
    case 'development':
      return merge(commonConfig, developmentConfig);
    default:
      return {};      // <- this is the problem
  }
};

module.exports = (env) => {
  switch (env) {
    case 'production':
      return merge(commonConfig, productionConfig);
    case 'staging':
      return merge(commonConfig, stagingConfig);
    default:
      return merge(commonConfig, developmentConfig);
  }
};

then, everything gose fine.

JoeHetfield on 29 Mar 2018

❤2 🎉1

@JoeHetfield sensational, thank you very much. I had resolved with https://github.com/martinpetlus/eslint-import-resolver-configurable

nicolascbarbosa on 29 Mar 2018

So I feel really silly but in my case I was pointing to the correct webpack.config I just didn't account for es6 modules in webpack.config.js renaming to webpack.config.babel.js fixed it for me

Yahkob on 30 Mar 2018

@nicolascbarbosa not work, could u please list the config of detail bro