问题
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
回答1:
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
回答2:
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!
回答3:
You can add vue-loader to your application and use absolute path Prefixed by "./" for example.
script src="./pathtoyourjsfile.js"
回答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/../..
回答5:
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"
来源：https://stackoverflow.com/questions/46203196/these-dependencies-were-not-found-error-in-vue-js