Vue-cli: dependancy and ERROR thrown during installation and vue serve

[ctfrancia]

Version

3.0.5

Reproduction link

https://github.com/ctfrancia/shop

Node and OS info

npm 5.6.0

Steps to reproduce

vue serve

What is expected?

to show the application after running the command

What is actually happening?

This dependency was not found:

• @/components/HelloWorld.vue in ../node_modules/babel-loader/lib??ref--12-0!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./views/Home.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @/components/HelloWorld.vue

---

I have uninstalled and reinstalled both vue and @vue/cli. updated npm and reinstalled. During installation errors are thrown:

ERROR Error: No files matching 'tests' were found.

Error: No files matching 'tests' were found.

at resolvedPathsByGlobPattern.reduce (/Users/christian/Desktop/personal_projects/shop/shop/node_modules/eslint/lib/util/glob-utils.js:244:19)

at Array.reduce (<anonymous>)

at Object.listFilesToProcess (/Users/christian/Desktop/personal_projects/shop/shop/node_modules/eslint/lib/util/glob-utils.js:242:59)

at CLIEngine.executeOnFiles (/Users/christian/Desktop/personal_projects/shop/shop/node_modules/eslint/lib/cli-engine.js:513:36)

at lint (/Users/christian/Desktop/personal_projects/shop/shop/node_modules/@vue/cli-plugin-eslint/lint.js:47:25)

at api.onCreateComplete (/Users/christian/Desktop/personal_projects/shop/shop/node_modules/@vue/cli-plugin-eslint/generator/index.js:106:25)

at Creator.create (/usr/local/lib/node_modules/@vue/cli/lib/Creator.js:176:13)

at <anonymous>

at process._tickCallback (internal/process/next_tick.js:188:7)

-------- ALSO --------

[email protected] requires a peer of graphql@^0.11.0 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of graphql@^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of graphql@^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of graphql@^0.13.0 but none is installed. You must install peer dependencies yourself.

npm WARN @apollographql/[email protected] requires a peer of graphql@^0.13.1 but none is installed. You must install peer dependencies yourself.

---

This is a new bug and has never happened previously while starting a new project/running an old project.

[nirodaonline]

Quick fix:

Changed Home.vue:
import HelloWorld from '@/components/HelloWorld.vue'
to
import HelloWorld from '../components/HelloWorld.vue'

But there must be a better way.

[cristiangiagante]

this is still happening in last version, please reopen

[sodatea]

@cristiangiagante Please provide more information and also check if it's the same issue as https://github.com/vuejs/vue-cli/issues/3243

[patricio-ezequiel-hondagneu-roig]

I'm having the same problem

[thierryjacoel]

If using webpack-bundle-tracker, you can add this line to your chainWebpack configuration:
config.resolve.alias.set('@', path.resolve(__dirname + '/src'));

[Matthew-Benson]

I am having the same problem but only within a multi-stage docker build and only when ran from a gitlab-runner. I have components under src/components/layout/{component} and I am importing them with import x from '@/components/layout/x' and the crazy thing that I can't pin down is that the build works on my machine and the build works on my machine using docker, but somehow the build does not work from the gitlab-runner doing the docker build. I cannot figure that one out but I'll put my config here for reference.

Dockerfile

# build stage
FROM node:12-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
  ],
};

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@/styles/variables.scss";',
      },
    },
  },
};

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2020: true,
  },
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never',
    }],
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
        extensions: ['.js', '.vue'],
      },
    },
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        mocha: true,
      },
    },
  ],
};