These dependencies were not found error in Vue.js

一个人想着一个人 提交于 2020-12-05 07:29:02

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!