Vue-cli: Create app with vue ui fails (Unable to resolve path to module '@/components/HelloWorld.vue')

[victornpb]

Version

3.0.0-rc.3

Reproduction link

http://n/a

Steps to reproduce

$vue ui
Use this options on the web UI

Package manager: npm
Override: no
Init git: yes
Preset: manual
Features: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit Testing, E2E Testing
Configuration
CSS pre-processor: SCSS/SASS
Linter: ESLint   airbnb
Lint on save: yes
Lint and fix on commit: yes
Unit testing: jest
E2E: Cypress

Click [Create Project]

What is expected?

create project without errors

What is actually happening?

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


Vue CLI v3.0.0-rc.3
✨  Creating project in /Users/guest/Developer/matrix.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> [email protected] install /Users/guest/Developer/matrix/node_modules/fsevents
> node install

[fsevents] Success: "/Users/guest/Developer/matrix/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install /Users/guest/Developer/matrix/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done


> [email protected] postinstall /Users/guest/Developer/matrix/node_modules/cypress
> node index.js --exec install


Cypress 3.0.2 is already installed in /Users/guest/Library/Caches/Cypress/3.0.2

added 1930 packages in 57.182s

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


> [email protected] install /Users/guest/Developer/matrix/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/guest/.npm/node-sass/4.9.0/darwin-x64-57_binding.node

> [email protected] postinstall /Users/guest/Developer/matrix/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/guest/Developer/matrix/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine
added 166 packages, updated 1 package and moved 2 packages in 20.007s

⠋  Running completion hooks...error: Unable to resolve path to module '@/components/HelloWorld.vue' (import/no-unresolved) at matrix/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 matrix/tests/unit/HelloWorld.spec.js:2:24:
  1 | import { shallowMount } from '@vue/test-utils';
> 2 | import HelloWorld from '@/components/HelloWorld.vue';
    |                        ^
  3 | 
  4 | describe('HelloWorld.vue', () => {
  5 |   it('renders props.msg when passed', () => {


2 errors found.
Error: Process exited with code 1
    at exports.exit (/Users/guest/Developer/matrix/node_modules/@vue/cli-shared-utils/lib/exit.js:7:11)
    at lint (/Users/guest/Developer/matrix/node_modules/@vue/cli-plugin-eslint/lint.js:72:5)
    at api.onCreateComplete (/Users/guest/Developer/matrix/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 <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
⠸

---

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.4
BuildVersion:   17E202
$ node --version
v8.11.3
$ npm --version
5.6.0
$ vue --version
3.0.0-rc.3
$ git --version
git version 2.14.2

[LinusBorg]

Could reproduce this with the UI. Then I ran the same project config settings from the CLI, and everything worked fine, so it's definitely UI-releated.

The errors shown are eslint-errors, and refer to the import/no-unresolved rule from airbnb config. This rule relies on the webpack config created by vue-cli, more specifically, it reads the aliases it contains and takes them into account when evaluating dependency paths.

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

Since this works when using the CLI, I can only assume that either:

• eslint is not able to resolve the webpack config (but I would assume eslint would throw an error here)
• eslint evaluates dependency paths with the wrong cwd (but then other dependencies would also fail, wouldn't they?

So this is how far I've come, I think @Akryum has to take a closer look here.

[Akryum]

I can't reproduce this on the dev branch.

[akrome11]

I am having the same issue

[hectorj]

Same here. I tried installing and configuring https://www.npmjs.com/package/eslint-import-resolver-jest but it didn't solve the issue

[Flamenco]

This happens when is parser: '@typescript-eslint/parser' included. It is already included by the extended plugins. The error goes away when I comment out the parserOptions or the @vue/airbnb'.

  parserOptions: {
     parser: '@typescript-eslint/parser'
   },

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    '@vue/typescript',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    semi: "off",
    'import/extensions': ["off", "never"],
  },
   parserOptions: {
     parser: '@typescript-eslint/parser'
   },
}