eslint-import-resolver-webpack don't work for resolved paths #352
Comments
|
Questions:
|
|
The test project is placed on https://github.com/must-be-perfect/searchresults/tree/version-0. |
|
Nothing obvious at a glance... |
|
i am having the same problem. |
|
Maybe is because |
|
I am facing the same issue and I have no idea why! |
|
not sure it's coz of that. my eslint config extends google's.. |
|
Mine is extending airbnb |
|
i have the same issue, versions: webpack: 1.13.1 |
|
I just released 0.3.0 of the Webpack resolver yesterday (behind "next" tag). Can you see if that fixes it? I still don't understand the issue, but that version uses Webpack's actual resolver under the covers. |
|
Will try asap. Thanks a lot!
|
|
Actually, just published v0.3.1(tag "next") that has debug logging built in (ref: #300), try calling ESLint from a terminal as follows: DEBUG=eslint-plugin-import:* $(npm bin)/eslint src/jsx/redux/store.jsI would try linting a single file; the output is pretty verbose but hopefully will identify the issue (or at least disqualify bad config). |
|
for me is fixed no, sorry, have the same issue |
|
Can you run with the debug ENV var set as I described above and paste the output? |
|
I’m having the same problem. Seems to happen when I use |
|
@benmosher I was having the same issue and after enabling the debug ENV I found that 'eslint-import-resolver-webpack' was failing to resolve the import statements in my webpack.config.js file. _SyntaxError: Unexpected token import I've "solved" this by creating a dummy web pack with just the resolve.root set. |
|
If you name the file with |
|
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). |
|
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: |
|
@johnhforrest can you install v0.3.1 of the webpack resolver and run DEBUG=eslint-plugin-import:* eslint [.. one file ..]It will spit out a bunch of (hopefully useful) debug logging. I recommend that you only run it against one file at a time or it will get lost in a wall of log messages. |
|
I'm closing this on account of it sortof meandering around. If any of y'all are able to run with |
|
@benmosher here's what I get when I run DEBUG=eslint-plugin-import:* on my app directory... Cannot find module 'eslint-config-airbnb' |
|
@smkhalsa: so looks like there's another problem ATM, with your Airbnb shared config? |
|
@smkhalsa you might need to run |
|
I solved that problem providing absolute path for webpack config file: Notice that this solution forces to use |
|
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 Finally I tried the local eslint instead of the global one and everything works fine now. Both in v3.3.0. do The cause may still be what @jsdf described, but I have to work around in another way. |
|
By the way, which module implements the magic |
|
That's webpack itself; I'd assume eslint would do it too. |
|
|
@sompylasar: the Webpack resolver does it to match Webpack proper (which also does it). so it ought to work in any ESLint integration environment. |
|
@benmosher ESLint does not rely on Webpack, so does not Atom Linter, so when Atom Linter calls ESLint, there is no Webpack magic built in. |
|
clarification: So: Atom Linter => ESlint => eslint-plugin-import => eslint-import-resolver-webpack => ✨magic✨ |
|
resolved by adding the webpack resolver plugin to the eslintrc config and CHANGING in the webpack config files require path in ES5 style. |
|
I might as well be wrong, but it should be possible to use ES6 syntax with Webpack configuration if you rename it to |
|
@asdine your solution works! Thanks! |
|
I'm running into this issue as well, but only when viewing files in Atom. When I run If I run The line which failes is: import AuthStore from 'stores/AuthStore';But that is located in Does anyone have an idea what's going on? This issue is driving me nuts 🔩 |
|
@bramschulting If you look into the error stacktrace, it is coming from eslint-import-resolver-node, while you expect it to use eslint-import-resolver-webpack. Seems you have configured both, and node takes precedence over webpack. |
|
@sompylasar Oh right, thanks! That's due to a config we're extending (airbnb). Is there a way to disable this? I can manually overwrite it, but I'd prefer to disable it (as it's redundant) or 'use' the webpack config for the node resolver. Is that possible? |
|
@bramschulting |
|
@sompylasar yeah I was thinking of this too. But the downside of this is that you still have to define the |
|
@bramschulting Right. Well, I didn't go extra mile here, but you can require that info from a separate JS file 1) from |
|
@sompylasar OK, I'm running into another issue 🙈 I'm getting errors when importing files that have an alias in my webpack config, because the node-resolver tries to resolve them first I think. I've been looking at this module to figure out where the order is being determined, but I can't seem to find it. Could you give me some pointers? I'd like to make a PR which allows for setting the resolve order, maybe like this: "import/resolver": {
"order": ["webpack", "node"],
"webpack": {
"config": "webpack/config.js"
}
}That would fix all the problems I mentioned, right? |
|
@bramschulting The order of iterating over the configured resolvers is defined by the I assume it could look like this, but I haven't tested it: "import/resolver": [
{
"webpack": {
"config": "./webpack/config.js"
}
},
{
"node": {
"moduleDirectory": [
"whatever"
]
}
}
]I also recommend to write relative paths explicitly with |
|
The array shape of |
|
Just wanted to thank @sompylasar for his example of ignoring node_modules. That resolved an issue that broken eslint for us. Thank you!! |
|
@gricard You're welcome! |
|
as @arkaitzgarro said, it works for me. but I didn't use path.
my .eslintrc.js : module.exports = {
//... other configs
plugins: [
'vue',
'import'
],
settings: {
"import/resolver": {
"webpack": {
"config": "./build/webpack.base.conf.js"
}
}
},
}files location: |
This comment has been minimized.
This comment has been minimized.
|
What did it for me was to move Before: resolve: {
alias: {
component: path.resolve(__dirname, 'frontend/component/'),
store: path.resolve(__dirname, 'frontend/store/'),
lib: path.resolve(__dirname, 'frontend/lib/'),
context: path.resolve(__dirname, 'frontend/context/'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread'],
},
},
resolve: {
extensions: ['*', '.js', '.jsx'], // <-- This has to be moved up
},
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},After: resolve: {
alias: {
component: path.resolve(__dirname, 'frontend/component/'),
store: path.resolve(__dirname, 'frontend/store/'),
lib: path.resolve(__dirname, 'frontend/lib/'),
context: path.resolve(__dirname, 'frontend/context/'),
},
extensions: ['*', '.js', '.jsx'], // <-- Here, it works
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread'],
},
},
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
}, |
|
Thank you so much. You solved my one-year problem. |
and others
.eslintrc
webpack.config.js
src/index.js
in console:
The text was updated successfully, but these errors were encountered: