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
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With