Vue-cli: `import/no-unresolved`and`import/extensions` showed up when I gave a `settings` on `.eslintrc`

Created on 27 Sep 2018 · 7Comments · Source: vuejs/vue-cli

Version

3.0.4

Reproduction link

https://github.com/fengxinming/vuecli3-demo

Node and OS info

node: v8.11.1, npm: 6.4.1, OS: MacOS10.13.5

Steps to reproduce

npm i
npm run build

What is expected?

no warnings showed up

What is actually happening?

/Users/jesse/workspace/vuecli3-demo/src/main.js
2:17 error Unable to resolve path to module '@/App.vue' import/no-unresolved
3:20 error Unable to resolve path to module '@/router' import/no-unresolved
3:20 error Missing file extension for "@/router" import/extensions
4:19 error Unable to resolve path to module '@/store' import/no-unresolved
4:19 error Missing file extension for "@/store" import/extensions
5:8 error Unable to resolve path to module '@/registerServiceWorker' import/no-unresolved
5:8 error Missing file extension for "@/registerServiceWorker" import/extensions

✖ 7 problems (7 errors, 0 warnings)

I have provided a demo on github, you may check the link

Source

fengxinming

Most helpful comment

Use the webpack config exported by @vue/cli-service (which will load config from vue.config.js) instead of directly requiring vue.config.js.

https://github.com/vuejs/vue-cli/blob/e31e2ac0b77e5645cb42c6b37924f73c63045ef8/packages/%40vue/eslint-config-airbnb/index.js#L5-L10

sodatea on 27 Sep 2018

👍19 👎1

All 7 comments

Use the webpack config exported by @vue/cli-service (which will load config from vue.config.js) instead of directly requiring vue.config.js.

https://github.com/vuejs/vue-cli/blob/e31e2ac0b77e5645cb42c6b37924f73c63045ef8/packages/%40vue/eslint-config-airbnb/index.js#L5-L10

sodatea on 27 Sep 2018

👍19 👎1

@sodatea It still can not resolve my issues

fengxinming on 27 Sep 2018

👍2

@sodatea

I have provided a demo, did you check it?

[eslint] Unable to resolve path to module '@/registerServiceWorker'. (import/no-unresolved)
[eslint] Missing file extension for "@/registerServiceWorker" (import/extensions)

fengxinming on 27 Sep 2018

@fengxinming Here's the screencast: https://asciinema.org/a/82BJQb23Qgbd628ql5Kyl7XgP

sodatea on 27 Sep 2018

@sodatea but the codes in my vscode, it still shows red underline

fengxinming on 27 Sep 2018

👍2

Then it's a vscode issue.
Possible related:
https://github.com/vuejs/vue-cli/issues/2546
https://github.com/Microsoft/vscode-eslint/issues/405

sodatea on 27 Sep 2018

👎3

https://github.com/vuejs/vue-cli/issues/2628#issuecomment-425034602 in combination with installing eslint-import-resolver-webpack worked for me.