eslint-plugin-import: eslint-import-resolver-webpack don't work for resolved paths
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["import"],
"settings": {
"import/resolver": "webpack"
},
"env": {
"browser": true
}
}
webpack.config.js
...
resolve: {
root: path.resolve('src'),
extensions: ['', '.js', '.scss'],
modulesDirectories: ['node_modules'],
},
...
src/index.js
import routes from 'routes';
import 'scss/index.scss';
in console:
Error - Unable to resolve path to module 'routes'. (import/no-unresolved)
Error - Unable to resolve path to module 'scss/index.scss'. (import/no-unresolved)
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 80 (35 by maintainers)
I solved that problem providing absolute path for webpack config file:
Notice that this solution forces to use
jsformat foreslint.@zhanghaowx
should be
For those who have an ES6 webpack config and don’t want to change it back to ES5, you can create a file
webpack.config.eslint.js(or any other name actually) with the following content:I was having this same issue when upgrading webpack to v2, updating
eslint-import-resolver-webpackto 0.8.1 fixed it. Here is the list of my eslint related package versions:For those who still have this issue, @sompylasar and @ChristianHersevoort solutions solve the problem.
package.json:
.eslintrc.js:
webpack/config/default.js: The previous ES5 implementation:
should be rewritten to:
Why this is happening? The reason for ESLint resolver is failing on Webpack config written in ES6 syntax, as far as I understood, is that the configuration file should be valid (it gets validated by Webpack once pointed in .eslintrc’s
settings: { 'import/resolver' }. There is no conversion from ES6->commonJS, therefore configuration file is not considered valid, and resolving fails. Rewriting the configuration file solved the problem for me. Note: if by any chance your Webpack config requires JS files written in ES6 syntax, it will fail as well (you would need to set those files to Webpack’sexcludeproperly).How to know if this is your issue Use the command suggested by @benmosher:
The output should include the whole Webpack configuration object if it is valid (and therefore will be used by eslint import resolver):
Thank you for the great tips, guys!
npm install --save-dev eslint-import-resolver-webpack- resolved the issue!I’ve had issues with this plugin, but finally figured out the problem: don’t write webpack config in es6 format.
Still experiencing the same issues here with webpack 2.2.0 eslint 3.14.0 eslint-config-airbnb 13.0.0 eslint-plugin-import 2.2.0 eslint-import-resolver-webpack 0.7.1
I actually moved towards defining the config directly inside
.eslintrc:neither the alias
shared, nor any of the directories insideappsare resolved, node modules, however, do work now.running
DEBUG=eslint-plugin-import:* node_modules/.bin/eslint apps/news/redux/sagas/feed.jsgives me (only including one of the no-unresolved errors):Any idea what the problem could be??
Also having this problem with version 0.3.0 and airbnb rules.
I tried jsdf’s recommendation of removing any path.resolve references from the config and that didn’t work for me.
Here’s what my resolve looks like in my webpack.config.js file:
And here’s my .eslintrc:
I encountered an issue like this due to the fact that our webpack config was building some absolute paths using path.resolve, which implicitly uses process.cwd().
I fixed the issue by ensuring that the webpack config could resolve all necessary paths regardless of what process.cwd was (by resolving them relative to __dirname).
@bramschulting I use it this way in my
.eslintrc.js:resolved by adding the webpack resolver plugin to the eslintrc config and CHANGING in the webpack config files require path in ES5 style.
Actually, just published v0.3.1(tag “next”) that has debug logging built in (ref: #300), try calling ESLint from a terminal as follows:
I would try linting a single file; the output is pretty verbose but hopefully will identify the issue (or at least disqualify bad config).
@alicerocheman The issue is that your webpack config that you provide to eslint is written not in ES5 (with imports and arrow functions), but eslint only understands ES5. https://github.com/benmosher/eslint-plugin-import/issues/352#issuecomment-284216693
There are two ways to make this work:
I used the second option by having a separate file provided to eslint that requires babel-register to plug in the transpilation and the webpack config and is written in ES5.
@asdine your solution works! Thanks!
@sompylasar SOLVED! finally ^^
I changed my json .eslintrc into an ES5 .eslintrc.js, and changed the name of the webpack config file into path.resolve(__dirname,“webpack.config.dev.js”).
Here's the file (click to open)
MARK
Managed to get this working with the following .eslintrc:
Using the following package versions:
webpack: 1.12.14 eslint: 2.11.1 eslint-import-resolver-webpack: 0.8.1
Hope this helps somebody!
What did it for me was to move
extensions: ['*', '.js', '.jsx']frommodule.rules[0].resolveto the rootresolvefield (inwebpack.config.js)..jsxfiles were problematic.Before:
After:
clarification:
eslint-import-resolver-webpackimplements the aforementioned magic.So: Atom Linter => ESlint => eslint-plugin-import => eslint-import-resolver-webpack => ✨magic✨
There is no other way to configure eslint resolver I know about than to pass the file path. If there is, please tell me. Anyway, for the text editor to use eslint, we have to have a eslintrc (luckily this can be in executable JavaScript, not just static JSON). That file path passed to eslint resolver config is not used by the build pipeline (except for linting), the webpack compiler is called as a function from the build pipeline, and a generated webpack config is passed there.
I also have the same problem when running eslint from command line. (In Atom I use linter-eslint plugin and everything works fine)
@jsdf 's solutions doesn’t work for me either.
Here is what I do
By change
to
I solved some
import/no-unresolvedon dependencies installed insidenode_modules. But still all resolved paths are not recognized.Finally I tried the local eslint instead of the global one and everything works fine now. Both in v3.3.0. So instead of
do
The cause may still be what @jsdf described, but I have to work around in another way.
If you name the file with
.babel.jsas its extension, the plugin will use the nearest Babel to pre-compile your config. This should match Webpack’s behavior.