Vscode-eslint: import/no-unresolved with webpack modules/aliases in the VS Code

[ValeryVS]

Update:

So, there are few separate issues.

1) To fix issue now, I can adjust my config: replace object spreading with Object.assign, or use babel-register.
2) Something interpret Unexpected token ... as ESLint error and show no-undesolved, no-duplicate and other.

Which is wrong - it should be SyntaxError in ESLint output.

It happens because node v7.9.0 in VS Code can't launch webpack config with object spread syntax.
3) May be vscode-eslint can launch .eslintrc.js and webpack config with local node, not with bundles one?

---

Original text

Faced with such issue.
There is no errors while launching eslint from terminal.

Trying to reproduce error in clean repository, but without success yet.

[ValeryVS]

I can reproduce the similar error, with Type Error in webpack configuration. (when webpack.config.js can not be launched).
But in my original project webpack config works.

[alecf]

This was driving me bonkers and I was getting other odd errors from the import plugin. Just for kicks I put:

require('babel-register')

at the top of my .eslintrc and magically everything seems to work now! (I was already using babel-register elsewhere in my project, so it was already installed)

It seems like vscode-eslint runs eslint as a library, and JS imports aren't recognized without babel-register

[dbaeumer]

@ValeryVS how to you launch eslint from the terminal.

I think this is related to https://github.com/Microsoft/vscode-eslint/issues/455#issuecomment-384718090

@alecf adding require('babel-register') is a nice fix to solve the issue.

[ValeryVS]

@alecf
@dbaeumer
No, my webpack config doesn't require babel. It use require() for imports, etc.

But, when I create some simple webpack configuration - it works.
The reason is definitely in webpack config, but it is something else, not the new syntax.
I will try to debug it this week.

[ValeryVS]

@dbaeumer
Found it!

Our project is bundled with node 8.
So, there is some object destructions in webpack configuration.

But there is node v7.9.0 in VS Code! Webpack config executed with node 7.9.0 when vscode-eslint try to execute .eslintrc.js with eslint-plugin-import and eslint-import-resolver-webpack.

The wierd thing is, that in most of my files I have strange errors, like at the first image in that issue.
[eslint] Resolve error: Unexpected token ... (import/no-unresolved)
[eslint] Resolve error: Unexpected token ... (import/no-duplicates)

And ESLint output in VS Code was pretty clean

But, when I add one more resolver in my .eslintrc.js

'node': {
    'paths': [
        __dirname,
    ],
},

resolve errors are gone, and I, finally, saw the real error

[Info  - 19:40:18] ESLint server is running.
[Info  - 19:40:19] ESLint library loaded from: /Users/tasogare/Projects/MY_FOLDER/node_modules/eslint/lib/api.js
[Error - 19:40:20] ESLint stack trace:
[Error - 19:40:20] /Users/tasogare/Projects/MY_FOLDER/configs/webpack/browser.js:46
            ...grab(OLD_STYLE_PAGES_DIR, 'browser.js'),
            ^^^
SyntaxError: Unexpected token ...
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/tasogare/Projects/MY_FOLDER/configs/webpack/development.js:9:23)

[ValeryVS]

So, there are few separate issues.

1) I can adjust my config: replace object spreading with Object.assign.
2) Something interpret Unexpected token ... as ESLint error and show no-undesolved, no-duplicate and other.

Which is wrong - it should be SyntaxError in ESLint output.

3) May be vscode-eslint can launch .eslintrc.js and webpack config with local node, not with bundles one?

[ValeryVS]

1.1
Ok, now I'm understand how to solve this with babel-register

require('babel-register')({
    presets: [ 'es2015', 'stage-2' ],
});

It wasn't help me before, because, with default settings, it can't handle spread operator.
With stage-2 it can.

[dbaeumer]

@ValeryVS thanks for the great analysis. Very helpful.

I will keep the item open to look into 2 and 3

[viT-1]

https://github.com/Microsoft/vscode-eslint/issues/405#issuecomment-380745912

Still have this issue with VSCode 1.30.1
Project is bundled normally, but eslint plugin underlines me "incorrect" imports in paths with webpack aliases.

Here I found workaround but don't understand how to fix .eslintrc file.
https://github.com/Microsoft/vscode-eslint/issues/464#issuecomment-387205760

No solution to the problem found still?

[viT-1]

@alecf Can you show your root .eslintrc workaround?
Should I install babel-register globally?

[viT-1]

I changed webpack config from this:
resolve: { alias: { '~': path.resolve(__dirname), '@': path.resolve(__dirname, './src'), }, },
to this:
resolve: { alias: { '~': path.resolve(__dirname), '@': path.resolve(__dirname, 'src'), }, },

It seems to be ok. But intellisence not showing fresh added methods in imported file,
but show arguments intellisence after I writing the name of "fresh" method completely.

[callumlocke]

Thanks @alecf for the workaround. Switching from .eslintrc to .eslintrc.js and adding require('@babel/register') fixed it for me.

Still, I don't think this hack should be necessary, seems like this is a bug in the VSCode plugin, if the CLI works fine without the hack.

By the way, this only started happening to me after upgrading to Babel 7 and switching from .babelrc to babel.config.js, not sure if that's relevant.

[dbaeumer]

Regarding https://github.com/microsoft/vscode-eslint/issues/464#issuecomment-463676765

Can someone provide me with a GitHub repository that I can clone with steps on how to reproduce this?

Regarding using a different node version than the one that is shipped in VS Code. Use the eslint.runtime setting

[shapkarin]

Maybe this extention should parse jsconfig.json? Users need that file to make IDE understand aliases.

[dbaeumer]

I think if this is necessary then eslint itself or the corresponding eslint plugin should read the jsconfig.json file.

[shapkarin]

Seems that it's eslint-plugin-import problem
https://github.com/benmosher/eslint-plugin-import/issues/496
And probably I can find some solution in eslint-plugin-import issue.