Vscode-eslint: Bug with custom alias in Webpack

[pdomaleczny]

Version of used depedencies:

"webpack": "^3.5.6",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb-base": "^11.3.1",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",

Configuration of resolving alias: webpack.config.js

resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      myCustomAlias: path.resolve("src"),
    },
 },

Configuration of .eslint.js:

  settings: {
    "import/resolver": {
      webpack: {
        config: path.resolve("webpack/webpack.config.js"),
      },
    },
  },

Description of issue:
As you can see I have defined custom alias in webpack and when I am running eslint from the CLI everything passes but somehow VS plugin cannot resolve aliases and highlights every line when I am trying to import things from myCustomAlias

Any idea what may causing that behavior?

[dbaeumer]

@pdomaleczny when you run ESLint from the terminal do you run it in the same directory that you open in VS Code. IF you have a complex multi folder setup you need to let ESLint extension know which directory are root directories to find the right config files.

Can you share a GitHub repository that demos the problem. Then I can have a look and see whether this is a bug in the ESLint extension.

[pdomaleczny]

@dbaeumer Hi, thanks for so quick reply. Yeah both CLI run and the one from Visual Studio Code run from the same directory.
That's my structure:

src/
webpack/
--- webpack.config.js
.eslintrc.js
package.json

And thats my npm script that passes:
"lint": "eslint --ext .js --ext .jsx src"

I get both errors when I try to import:

(import/no-unresolved)
(import/no-extraneous-dependencies)

If I find more time in the weekend I will make demo repository so you can reproduce that issue :v:

[chenzhenxi]

I have exactly the same issue, and it's happened in all my ides. including VSCODE, SUBLIME, WEBSTORM...

[focux]

Same here.

[pdomaleczny]

@dbaeumer Any progress on reproducing this issue? Sorry but I was off for more than week and I wasn't able to do demo repo for that. If you still couldn't reproduce that I will create simple demo repo ✌️

[chenzhenxi]

I think I figured it out, it's not a VS code issue.

Es-lint webpack plugin only support webpack.config.js file that export Object.

not working

// webpack.config.js
module.exports = () => {
// your config
}

working

// webpack.config.js
module.exports = {
// your config
}

[pdomaleczny]

@chenxsan I have this 👇 and it still doesn't work :(

// webpack.config.js
module.exports = {
// your config
}

[dbaeumer]

Was out on vacation as well so a repository demoing this is still appreciated.

[pdomaleczny]

@focux @chenzhenxi I don't know how about you guys but in some magic way I am not occurring this issue anymore. Was any recent update @dbaeumer ?

[dbaeumer]

No, nothing that would have addressed something like this.

[willisplummer]

I'm still experiencing this issue :/

[dbaeumer]

@willisplummer can you provide a GitHub repository that repros the problem.

[willisplummer]

@dbaeumer i can but also it looks like this was an issue with some webpack configuration stuff after ejecting create react app.

here's the project where i've:

• ejected create-react-app
• added an alias for ./src to the webpack config
• added eslint-import-resolver-webpack and eslint-plugin-import to the lint config in package json
• added a lint script that works correctly to the package.json

https://github.com/willisplummer/demo-vslint-bug

---

the solution i've found is to pull out the resolve config into webpack.config.base.js and then point the eslint import config to that so that it's not concerned with NODE_ENV like on this branch:

https://github.com/willisplummer/demo-vslint-bug/compare/lint-fix

---

(I don't think that there's actually an issue with the vscode linter here. I wonder if it might be helpful to create a setting so that a user can provide the embedded linter with env context though and not have to mess with their webpack config?)

[pdomaleczny]

@willisplummer @dbaeumer Sorry for a little absence. I had some business trips. I have resolve in webpack.config.js and my eslint settings are pointing to it. I have no errors when I run eslint from CLI but in VS Code everything is highlighted so I guess it isn't a solution for me :C

[JoeHetfield]

Guys, I fond a clue. Seems the result of wabpack.config.js export affect this:

// not work
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, the 'env' is nuknow for eslint, so it got an empty {}
  }
};

// work
module.exports = env => (env === 'production'
  ? merge(commonConfig, productionConfig)
  : merge(commonConfig, developmentConfig));

[kamalbennani]

I have the same problem, when I run eslint in CMD I have no errors by my IDE complains about all my imports that are using aliases ! Did you find any solution to this ?

[GiancarlosIO]

I have the same issue! did someone find a solution for this? :(

[dbaeumer]

I cloned the example provided in this comment https://github.com/willisplummer and running .\node_modules\.bin\eslint .\src\App.js produces the same errors in the terminal:

Can someone provide me with an example where the errors only show up in the ESLint extension and not in the terminal.

[willisplummer]

@dbaeumer I'd imagine that you're able to replicate the issue in the terminal because you're not providing an ENV flag when running the linter - if you run yarn lint in my example repo you'll get the intended behavior(?)

[dbaeumer]

If I set Node_ENV to development everything works for me both in the terminal and in VS Code. Please note that you need to start VS Code form the terminal having Node_ENV set so that the eslint plug-ins correctly see the environemt variable.

[vscodebot[bot]]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[dbaeumer]

The issue got auto closed since I am not able to reproduce it and not additional steps got provided. I am happy to reopen if I have some steps I can use to track this down.

[GiancarlosIO]

Guys, I was getting the same issue, no errors with eslint command but vscode show me errors for import using aliases. Thanks for a vscode notification I just check the output tab and it shows me this:

yes, I was using spread operator in my webpack config, I'm using nodev8.9.0 and I don't know why eslint plugin shows an error :thinking: (and I can run webpack-dev-server without problems). I change the spread operator in my webpack config and now I'm not getting more errors :tada: :

So in my case, it was a webpack configuration error I think

[dbaeumer]

The reason for this is that the eslint extension uses the node version that ship with VS Code which is pretty outdated. This will change soon when VS Code moves to a newer Electron version which is planned.