These dependencies were not found error in Vue.js

Question

After updating npm & node to their last versions, I get following errors when I try to run my vue project:

These dependencies were not found:

• !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

I get same errors for all of my vue files, which all look like as follows:

Login.vue:

<template src="wisaapp/login/login.html"></template>
<script src="wisaapp/login/login.js"></script>
<style src="wisaapp/login/login.css" scoped></style>

The first error message I wrote was for referred css files in vue file. For js files I get the following error:

• !!babel-loader!wisaapp/login/login.js in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

The path for .js and .css files were before relative but it didn't make any difference.

What can be wrong?

Here is my package.json:

{
  "name" : "",
  "version" : "",
  "description" : "",
  "author" : "",
  "private" : true,
  "scripts" : {
    "dev" : "node build\/dev-server.js",
    "build" : "node build\/build.js",
    "unit" : "cross-env BABEL_ENV=test karma start test\/unit\/karma.conf.js --single-run",
    "e2e" : "node test\/e2e\/runner.js",
    "test" : "npm run unit && npm run e2e",
    "lint" : "eslint --ext .js,.vue src test\/unit\/specs test\/e2e\/specs"
  },
  "dependencies" : {
    "axios" : "^0.15.3",
    "vue-axios" : "^1.2.2",
    "lodash" : "^4.17.4",
    "uglify-js" : "git+https:\/\/github.com\/mishoo\/UglifyJS2.git#harmony",
    "vue" : "^2.1.10",
    "vue-router" : "^2.2.0",
    "vue-style-loader" : "^2.0.4",
    "vue-touch" : "^2.0.0-beta.4",
    "vuex" : "^2.1.2",
    "wisaapp" : "./../../../../wisaweb_trunk/app/modules/wisaapp",
    "wisaapp-agenda-common" : "wisaapp-agenda-common"
  },
  "devDependencies" : {
    "autoprefixer" : "^6.7.2",
    "babel-core" : "^6.22.1",
    "babel-eslint" : "^7.1.1",
    "babel-loader" : "^6.2.10",
    "babel-plugin-transform-runtime" : "^6.22.0",
    "babel-preset-es2015" : "^6.22.0",
    "babel-preset-stage-2" : "^6.22.0",
    "babel-register" : "^6.22.0",
    "chalk" : "^1.1.3",
    "connect-history-api-fallback" : "^1.3.0",
    "css-loader" : "^0.26.1",
    "eslint" : "^3.14.1",
    "eslint-friendly-formatter" : "^2.0.7",
    "eslint-loader" : "^1.6.1",
    "eslint-plugin-html" : "^2.0.0",
    "eslint-config-standard" : "^6.2.1",
    "eslint-plugin-promise" : "^3.4.0",
    "eslint-plugin-standard" : "^2.0.1",
    "eventsource-polyfill" : "^0.9.6",
    "express" : "^4.14.1",
    "extract-text-webpack-plugin" : "^2.0.0-rc.2",
    "file-loader" : "^0.10.0",
    "friendly-errors-webpack-plugin" : "^1.1.3",
    "function-bind" : "^1.1.0",
    "html-webpack-plugin" : "^2.28.0",
    "http-proxy-middleware" : "^0.17.3",
    "webpack-bundle-analyzer" : "^2.2.1",
    "cross-env" : "^3.1.4",
    "karma" : "^1.4.1",
    "karma-coverage" : "^1.1.1",
    "karma-mocha" : "^1.3.0",
    "karma-phantomjs-launcher" : "^1.0.2",
    "karma-sinon-chai" : "^1.2.4",
    "karma-sourcemap-loader" : "^0.3.7",
    "karma-spec-reporter" : "0.0.26",
    "karma-webpack" : "^2.0.2",
    "lolex" : "^1.5.2",
    "mocha" : "^3.2.0",
    "chai" : "^3.5.0",
    "sinon" : "^1.17.7",
    "sinon-chai" : "^2.8.0",
    "inject-loader" : "^2.0.1",
    "babel-plugin-istanbul" : "^3.1.2",
    "phantomjs-prebuilt" : "^2.1.14",
    "chromedriver" : "^2.27.2",
    "cross-spawn" : "^5.0.1",
    "nightwatch" : "^0.9.12",
    "selenium-server" : "^3.0.1",
    "semver" : "^5.3.0",
    "opn" : "^4.0.2",
    "ora" : "^1.1.0",
    "shelljs" : "^0.7.6",
    "url-loader" : "^0.5.7",
    "vue-loader" : "^10.3.0",
    "vue-style-loader" : "^2.0.0",
    "vue-template-compiler" : "^2.1.10",
    "webpack" : "^2.2.1",
    "webpack-dev-middleware" : "^1.10.0",
    "webpack-hot-middleware" : "^2.16.1",
    "webpack-merge" : "^2.6.1",
    "transfer-webpack-plugin" : "^0.1.4"
  },
  "engines" : {
    "node" : ">= 4.0.0",
    "npm" : ">= 3.0.0"
  }
}

npm version : 5.4.1

nodejs version: 0.10.25

UPDATE

I tried:

npm install css-loader --save
npm install vue-style-loader --save
npm install after deleting node_modules map
deleting all the generated files by build procedure

But none of them worked

If I run npm run build, I get the similar errors as follows:

ERROR in /home/builder/build/release/projects/wisaweb/connection-maker.vue Module not found: Error: Can't resolve 'vue-style-loader' in '/home/builder/build/release/projects/wisaweb/connection-maker' @ /home/builder/build/release/projects/wisaweb/connection-maker.vue 3:0-372 @ ./src/router/index.js @ ./src/main.js @ multi ./build/prod-client ./src/main.js

ERROR in /home/builder/build/release/projects/wisaweb/todolist.vue Module not found: Error: Can't resolve 'babel-loader' in '/home/builder/build/release/projects/wisaweb/todolist' @ /home/builder/build/release/projects/wisaweb/todolist.vue 7:2-99 @ ./src/router/index.js @ ./src/main.js @ multi ./build/prod-client ./src/main.js

UPDATE 2

What npm recommends about the problem is:

To install them, you can run: npm install --save !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/src/components/global/login/login.css

Answer 1

The problem appears when there is an import() call for a missing file. Like for a lazy loading component in a vue file:

components: {
  myComponent: () => import("@/somewhere/myAnotherComponent.vue");
}

Answer 2

I had the same issue, though in different context, when I wanted to include global styles file in my Vue app. I googled out following approach:

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        prependData: `
          @import "assets/styles/styles.scss";
        `,
      },
    }
  }
}

The problem with this approach is twofold - first it prepends the content of the styles.scss file to each scss file processed - so for every one of my Vue components (since sass-loader as all webpack loaders operates on per file basis) and secondly the path to styles.scss is not absolute. And since the sass-loader operates on per file basis, the path is also resolved in the context of that file and its fs location, and this might not work from different locations in the project.

In ended up just flat out importing the styles file in the root of the project, using import './styles.scss' in src/main.ts.

Answer 3

Notice that the error says:

someFile.vue IN anotherFile.vue.

For me this meant I had an import statement trying to import someFile.vue, in anotherFile.vue, and it had the wrong path.

So double check the import statements in the anotherFile.vue file have the correct path.

eg:

import PageLayout from "@/layouts/PageLayout.vue"

Answer 4

You can add vue-loader to your application and use absolute path Prefixed by "./" for example.

script src="./pathtoyourjsfile.js"

Answer 5

I had the same issue but another solution!

The problem was the path structure of the project folder. My path was looking like this (Note the same map names)

/website/website/app/../..

I changed it so that the path did not contained the same names anymore what solved the problem.

/site/website/app/../..

Answer 6

I had the same issue today. I could'nt find solution until I renamed the parent folder which had ! (exclamation mark) in its name. I removed an exclamation mark and everything started to work!

Answer 7

It looks like you're missing a peerDependency, this could be because you upgraded from NPM 2 or it could just be that something went wrong with the installation, so simply do:

npm install css-loader --save-dev

If all else fails, simply remove node_modules from your project and do a fresh install: npm install