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.

[gpgpublickey]

this is still happening in last version, please reopen

[haoqunjiang]

@cristiangiagante Please provide more information and also check if it's the same issue as #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,
      },
    },
  ],
};

[stefanhettich]

@Matthew-Benson facing exactly the same problem like you! Local build (on windows machine) runs perfect. Build on GitLab CI Runner (inside kubernetes) fails, because of missing dependency. Changing from '@/components/...' to '../components/....' doesn't solve the problem.

Versions:
Node: lts-alpine (14.15.4)
@vue-cli-service: 4.5.10

Any hints or version downgrades which might solve this?

[Matthew-Benson]

@stefanhettich I'm so sorry! I did the classic bad-developer thing of solving my problem and not coming back to update what my solution was.

My issue was that I am using a case-insensitive file-system on MacOS - I named the folder in question @/components/Layout and then some commits later I realized the naming was weird and renamed the folder to @/components/layout and went about my merry day. A few days later when I was working on CI I ran into our crazy build issue. After hours of debugging I realized the folder in the kube runner was capital L Layout and not layout and because the directory layout could not be found the build failed!

I opened the repo in the gitlab editor and renamed the folder there to layout but you could also just do that in any case-sensitive system and commit it.

Changing the folder casing on my Mac never got committed and pushed up because the file system sees no difference.

Hope that helps!

[stefanhettich]

@Matthew-Benson Thank you so much for your response!

It was exactly the same thing in my case. I had several mixins like EnvService.ts and renamed them locally to envService.ts and git did not handle that, because Windows doesn't seem to be case-sensitive.

Nevertheless, the issue is fixed, you saved my day! Thanks a lot!