Unable to resolve path to module '@/components/HelloWorld.vue' on vue ui

[ruanltbg]

Version

3.0.0-rc.3

Reproduction link

https://github.com/ruanltbg/vue-ui-bug

Steps to reproduce

On terminal run:
$ vue ui

On the browser

• Create new project
• Fills the form with:
• Package manager => npm
• Overwrite target folder => true
• Initialize git => true
• Message => First commit
• Next
• Presenter => Manual
• Next
• Babel => true
• PWA => true
• Router => true
• Vuex => true
• CSS processor => true
• Linter => true
• Unit test => true
• Config files => true
• Next
• CSS processor => SCSS/SASS
• Linter => Airbnb
• Lint to save => true
• Unit test => mocha
• Next
• Continue without saving

What is expected?

To create a project successfully

What is actually happening?

$ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000


Vue CLI v3.0.0-rc.3
✨  Creating project in /Users/ruan/workspace/projects/another-project.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> fsevents@1.2.4 install /Users/ruan/workspace/projects/another-project/node_modules/fsevents
> node install

[fsevents] Success: "/Users/ruan/workspace/projects/another-project/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> nodent-runtime@3.2.1 install /Users/ruan/workspace/projects/another-project/node_modules/nodent-runtime
> node build.js

## Built /Users/ruan/workspace/projects/another-project/node_modules/nodent-runtime/dist/index.js

> yorkie@1.0.3 install /Users/ruan/workspace/projects/another-project/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

added 1549 packages from 1195 contributors and audited 13684 packages in 32.041s
found 0 vulnerabilities


🚀  Invoking generators...
📦  Installing additional dependencies...


> node-sass@4.9.0 install /Users/ruan/workspace/projects/another-project/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/ruan/.npm/node-sass/4.9.0/darwin-x64-64_binding.node

> node-sass@4.9.0 postinstall /Users/ruan/workspace/projects/another-project/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/ruan/workspace/projects/another-project/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
added 133 packages from 125 contributors and audited 14952 packages in 13.743s
found 9 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

⠋  Running completion hooks...error: Unable to resolve path to module '@/components/HelloWorld.vue' (import/no-unresolved) at another-project/src/views/Home.vue:10:24:
   8 | <script>
   9 | // @ is an alias to /src
> 10 | import HelloWorld from '@/components/HelloWorld.vue';
     |                        ^
  11 | 
  12 | export default {
  13 |   name: 'home',


error: Unable to resolve path to module '@/components/HelloWorld.vue' (import/no-unresolved) at another-project/tests/unit/HelloWorld.spec.js:3:24:
  1 | import { expect } from 'chai';
  2 | import { shallowMount } from '@vue/test-utils';
> 3 | import HelloWorld from '@/components/HelloWorld.vue';
    |                        ^
  4 | 
  5 | describe('HelloWorld.vue', () => {
  6 |   it('renders props.msg when passed', () => {


2 errors found.
Error: Process exited with code 1
    at exports.exit (/Users/ruan/workspace/projects/another-project/node_modules/@vue/cli-shared-utils/lib/exit.js:7:11)
    at lint (/Users/ruan/workspace/projects/another-project/node_modules/@vue/cli-plugin-eslint/lint.js:72:5)
    at api.onCreateComplete (/Users/ruan/workspace/projects/another-project/node_modules/@vue/cli-plugin-eslint/generator.js:94:24)
    at Creator.create (/usr/local/lib/node_modules/@vue/cli/lib/Creator.js:168:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
⠙

---

May be related to:
vuejs-templates/webpack#144
#422

[ruanltbg]

Removing the airbnb linter worked fine.

[hsxfjames]

Same problem here. Seems the UI and CLI have different logic.

[Akryum]

Duplicate of #1611

[TabSpace]

Solved like this: #2628

[mmichealjroberts]

Same issue occuring in v2.6.11 of Vue - issue is with '@vue/airbnb' , removing from .eslintrc.js seems to be the current temporary workaround.

[SharakPL]

@michealjroberts I'm using v.2.6.11 with airbnb, installed with @vue/cli. Got similar error couple times but it's not related to airbnb. I simply used wrong component name. I bet you're having the same problem.

[mazengh]

I was having the same issue... In .eslintrc.js add the rule below

rules: { 'import/extensions': ['error', 'always', { js: 'never', vue: 'never' }], },

[thinh105]

here is my setting in .eslintrc.js, and it works.

rules: {
    // another rules, 

    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        mjs: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        vue: 'never',
      },
    ],
  },

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
      },
    },
  },

[Souravgoswami]

I faced the bug just now. Here I have a file called "AuditItemEditDescription.vue", I can't import it. I can truncate the characters and make it "AuditItemEditDesc.vue", and it works. But for whatever reason the bigger name says error: Unable to resolve path to module .... It's weird. I'm also guessing it's a linter problem.

[mwaarna-tgm]

I faced the bug just now. Here I have a file called "AuditItemEditDescription.vue", I can't import it. I can truncate the characters and make it "AuditItemEditDesc.vue", and it works. But for whatever reason the bigger name says error: Unable to resolve path to module .... It's weird. I'm also guessing it's a linter problem.

I ran into the same issue with the long component name. Saw your comment and shortened my component name got the error to go away. Thanks for commenting.