webpack resolver: config not used if config file requires transpilation

[Nilos]

Hi everyone,

I get a lot of no-unresolved errors when using this with webpack 2.3.3.

Plugins:

"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.2.0",

Webpack resolve config:

resolve: {
  modules: [
    path.join(__dirname, 'src'),
    path.join(__dirname, 'styles'),
    'node_modules'
  ]
},,

Eslintrc:

"settings": {
  "import/resolver": {
    "webpack": {
      "config": "webpack.config-base.js"
    }
  }
}

[jeefuji]

Hello !
Same problem here.

Since I updated from 2.2.1 to 2.3.3, i can't resolve any package from custom paths.

resolve: { alias: config.pack.alias, extensions: ['.js', '.json', '.vue', '.css', '.node', '.ts', '.tsx', '.node'], modules: [ path.resolve(__dirname, 'app/node_modules') ] },

Nothing in app/node_modules is resolved unfortunately.

[paol]

Same here, I just updated from webpack v1 to latest v2 (2.4.1) and the webpack resolver stopped working.

In webpack.config.js:

  resolve: {
    modules: [
      "node_modules",
      path.resolve('./src')
    ],
    extensions: ['.jsx', '.js']
  }

[lvpro]

Same here. Worked fine with Webpack 1.14.0. Upgraded to Webpack 2.5.1 and the webpack-resolver no longer works. boo.

[vorlov]

updated to webpack 2.6.1 and resolver stopped working

.eslintrc

"settings": {
  "import/resolver": {
    "webpack": {
      "config": "webpack.common.config.js"
    }
  }
}

webpack.common.config.js

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      containers: path.resolve(ROOT_PATH, './src/containers'),
      components: path.resolve(ROOT_PATH, './src/components'),
      sections: path.resolve(ROOT_PATH, './src/components/ContainerSections'),
      'redux-base': path.resolve(ROOT_PATH, './src/redux-base'),
      utils: path.resolve(ROOT_PATH, './src/utils'),
      common: path.resolve(ROOT_PATH, './src/common'),
      routes: path.resolve(ROOT_PATH, './src/routes'),
      config: path.resolve(ROOT_PATH, './src/config'),
      static: path.resolve(ROOT_PATH, './static'),
      styles: path.resolve(ROOT_PATH, './src/styles'),
    },
  }

[ebramanti]

Similar config as @vorlov and my resolver is not working either.

[ljharb]

"+1s" aren't helpful; please avoid cluttering up issues and instead, react with an emoji on the original post. I'll now delete the +1s.

[bradennapier]

any movement/workaround to this issue? every file in my app fails due to this :(

Severity 	Provider 	Description	Line 
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/no-unresolved)	1:1
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/no-duplicates)	1:1
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/extensions)	1:1
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/no-absolute-path)	1:1
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/no-named-as-default)	1:1
Error	ESLint	Resolve error: Cannot assign to read only property '.js' of object '#<Object>' (import/no-named-as-default-member)	1:1
Error	ESLint	Unable to resolve path to module 'saga-event-observer'. (import/no-unresolved)	3:31
Error	ESLint	Missing file extension for "saga-event-observer" (import/extensions)	3:31

[lexiv0re]

@bradennapier the only workaround is to disable these rules in eslint config until the issue will be resolved.

[zhenyulin]

Mine doesn't work earlier either, and I found out the issue to be I used ES6 syntax import and export in the webpack config file, which isn't loaded by .eslintrc correctly, though babel-eslint has been applied as the parser. I resolved the issue by falling back to use require and module.exports.

HTH.

[r1m]

Same as @zhenyulin, my webpack config was not used at all.
I replaced all my import/export with require/module.exports in my webpack.config.js and it's now working

"settings": {
    "import/parser": "babel-eslint",
    "import/resolver": {
      "webpack": {
        "config": "./tools/webpack.config.js"
      }
    },

[benmosher]

@r1m: great point! the resolver only transpiles the config if it is named *.babel.js. Does webpack v2+ automatically transpile config?

[benmosher]

others: webpack 2/3 is supported (I'm using Webpack v3 with an ancient version of the plugin and it works fine) but as @r1m mentioned, if the resolver can't load the config because it has syntax not supported by your local Node version, it won't work unless you rename your config to .babel.js.

Does anyone have a reference to Webpack docs that describe whether/how it supports non-native syntax in config?

[r1m]

I'm not directly using webpack-cli but using the API, that why I can use import/export. I just realized that.
And you're right, according to Webpack doc, you must you the .babel.js extension. Thanks for pointing this.

Maybe a new feature : add a warning when this plugin cannot read the configFile provided :)

[ghost]

You can also transpile webpack config from es6 to es5 on the fly with babel-register

my package.json

"babel-preset-env": "^1.3.2",
"babel-register": "^6.26.0",
"eslint": "^4.10.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-import": "^2.8.0",

.eslintrc.json

"settings": {
  "import/resolver": {
    "webpack": {
      "config": "build/webpack.eslint.conf.js"
    }
  }
},

build/webpack.eslint.conf.js

require('babel-register')({
  presets: ['env'],
}); 

module.exports = require('./webpack.base.conf.js');

[ljharb]

or you can just name it webpack.config.babel.js and webpack will do that for you automatically.

[r1m]

The problem right now is that the plugin is failing silently to parse the config. Solutions exist but it's hard to find the cause in the first place : the only symptom is that eslint will not resolve imports.

The fix would be to document it properly or add a console warning when eslint is loading (don't know if possible)

[ljharb]

Some sort of warning or error seems reasonable; I'd be in favor of a hard failure when a config exists but fails to parse.

[spiffcs]

@qawsqs should be the accepted answer (@ljharb is also great if you have the context of the previous answer)

[mvorisek]

I confirm import/extensions rule does not work in vue files.

UPDATE: issue can be probably closed as https://www.npmjs.com/package/eslint-import-resolver-webpack solved the problem for me

[ljharb]

Seems like #799 (comment) and eslint-import-resolver-webpack are the solutions here.