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

Solution 1

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!

Solution 2

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

Solution 3

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

script src="./pathtoyourjsfile.js"

Solution 4

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/../..

Solution 5

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.

View more solutions

Comments

[Asqan]

I also found out that these errors (from babel-loader and vue-style-loader) are not for all js and css files. But the structure of vue files are exactly same, what is really weird

[Asqan]

What do you mean by parent folder? Which folder should that be in my case?

[Alex Pilugin]

Check all folders tree. If some name of a folder has an exclamation mark - maybe this is a problem. (I didn't check perhaps there are other restricted symbols in the folder name as well

[ssten]

This helped me to find the problem. My map structure contained two the same map names. /mapname/mapname/..