service lint break import/no-unresolved for extension .vue

[angeliski]

Version

3.3.0

Reproduction link

https://github.com/angeliski/vue-cli-typescript-lint-error-extension

Environment info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-2500S CPU @ 2.70GHz
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.7.0 - ~/.yarn/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: Not Found
    Safari: 12.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.1
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.1
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.1
    @vue/babel-sugar-functional-vue:  1.0.0-beta.1
    @vue/babel-sugar-inject-h:  1.0.0-beta.1
    @vue/babel-sugar-v-model:  1.0.0-beta.1
    @vue/babel-sugar-v-on:  1.0.0-beta.1
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0
    @vue/cli-plugin-e2e-cypress: ^3.3.0 => 3.3.0
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
    @vue/cli-plugin-typescript: ^3.3.0 => 3.3.0
    @vue/cli-plugin-unit-jest: ^3.3.0 => 3.3.0
    @vue/cli-service: ^3.3.0 => 3.3.0
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.0
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.0
    @vue/eslint-config-typescript: ^3.2.0 => 3.2.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.28
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    jest-serializer-vue:  2.0.2
    vue: ^2.5.21 => 2.5.21
    vue-class-component: ^6.0.0 => 6.3.2
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-jest:  3.0.2
    vue-loader:  15.5.1
    vue-property-decorator: ^7.0.0 => 7.2.0
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
    vuex: ^3.0.1 => 3.0.1
  npmGlobalPackages:
    @vue/cli: 3.3.0

Steps to reproduce

1. Clone repository
2. run npm install
3. run npm run lint

What is expected?

No errors

What is actually happening?

error: Unable to resolve path to module 'components/HelloWorld.vue' (import/no-unresolved) at src/views/Home.vue:10:24:

---

I see the issue #2628, but not works how expected. When I make the same steps in a project without Typescript the error happen in npm run lint but no in npm run serve

[kefranabg]

Your import path in src/views/Home.vue is wrong. Use import import HelloWorld from '@/components/HelloWorld.vue' instead of HelloWorld from 'components/HelloWorld.vue'

[angeliski]

Hi @kefranabg My import it's not wrong, since I tried use the webpack to resolve that extension: https://webpack.js.org/configuration/resolve/#resolve-extensions

The webpack config use this option how you can see that: https://github.com/vuejs/vue-cli/blob/e7af0d8fa374311693f14d1605e7ae442e43c3a6/packages/%40vue/cli-service/lib/config/base.js#L39-L41

I wrong about that? Can you explain better your comment? I'm not expert about, maybe I miss something

I think is a bug for vue-cli-service because the webpack config is provided, if the issue is for the webpack let me know

[LinusBorg]

the extension is not the issue. the path is wrong:

import HelloWorld from 'components/HelloWorld.vue';

This makes webpack / eslint look for a package named components in the /node_modules directory - which of course doesn't exist.

You either need to provide a relative path:

import HelloWorld from '../components/HelloWorld.vue';

Or use the special @/ shortcut to make the path relative to the /src directory:

import HelloWorld from '@/components/HelloWorld.vue';

[angeliski]

Ow, sorry @LinusBorg and @kefranabg I make the code wrong, but I do some tests before commit and forget the return the code to original problem. Really sorry about that. I update the repository, now is "correct":

https://github.com/angeliski/vue-cli-typescript-lint-error-extension/blob/4b817c2d00b44c10356ba07ec1273041ff2b5dad/src/views/Home.vue#L10

Removed extension .vue and update the reference to @/ how expected

[haoqunjiang]

Now it's another error (Missing file extension "vue" for "@/components/HelloWorld" (import/extensions)) and I think it works as expected

See: https://github.com/vuejs/vue-cli/blob/689f6152341239b49a6fa393034cb51dc0b33100/packages/%40vue/eslint-config-airbnb/index.js#L11-L17

[angeliski]

Thank you for support @sodatea , My problem is not solved but I see that it's not a bug.

Cheers

[LinusBorg]

you can solve your problem by extending the original config in your own .eslintrc file:

{
  // other stuff
  "settings": {
    "import/resolver": {
      "import/extensions": [
        ".js",
        ".jsx",
        ".mjs",
        ".ts",
        ".tsx",
        ".vue"
      ]
    }
  }
}

[angeliski]

Thanks for answer @LinusBorg That worked. Sorry for the issue, I will learn more about Webpack before open another issue

Cheers

[jgrandar]

For me, on vue-cli 3.5.0, it was extending the .eslintrc.js file:

...
rules: {
    // other stuff
    'import/extensions': ['error', 'always', {
      js: 'never',
      mjs: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
      vue: 'never'
    }]
  },
...

[gkatsanos]

@LinusBorg since older vue-cli generated websites didn't specify .vue in the end of component files, why not adding by default the related eslint rule out of the box? (since webpack correctly resolves the files without specifying the extension anyway, seems a bit confusing to not have the rule) (I can make a PR if OK)

[AlijiEmmanuel-dev]

The solution is to disable eslint for all the import statements.

/*eslint-disable */
import DashboardLayout from '../layouts/DashboardLayout';

after all import statements, you enable eslint. /eslint-enable /

This problem is peculiar to airbnb eslint preset.

[lukelions]

You saved my life men! Quick and efficient