I am trying to install the Vue Filemanager to my package.json. However, when I try to install the package using npm install and npm run dev I get this error:
ERROR in ./resources/assets/js/file-manager/FileManager.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- [email protected] (/var/www/node_modules/vue/dist/vue.runtimemon.js)
- [email protected] (/var/www/node_modules/vue-template-piler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-piler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-piler to the latest.
I have vue-loader 7.11.2 installed (its a leagacy project). I did not find any instructions how to reinstall vue-loader, but upgrading vue-template-piler alone did not work.
I also tried the following solutions:
Did not work
could not use it, because my versions of vue and vue-template-piler are higher
same with, versions are too low
did not work
did also not work
Here is my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^5.2.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"lodash": "^4.17.15",
"resolve-url-loader": "^3.1.0",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"vue": "2.6.10",
"vue-template-piler": "^2.6.14"
},
"dependencies": {
"ajv": "^6.10.2",
"animate.css": "^3.7.2",
"bloodhound-js": "^1.2.3",
"bootstrap": "^3.4.1",
"bootstrap-editable": "^1.0.1",
"bootstrap-sweetalert": "^1.0.1",
"bootstrap-switch": "^3.4.0",
"bourbon": "^5.1.0",
"clipboard": "^1.7.1",
"codemirror": "^5.49.0",
"d3": "^4.12.0",
"daterangepicker": "^2.1.27",
"dropzone": "^5.5.1",
"echarts": "^3.8.5",
"express": "^4.17.1",
"flag-icon-css": "^2.9.0",
"flat-social-icons": "0.0.1",
"flipclock": "^0.8.2",
"formatter": "^0.4.1",
"google-maps": "^3.3.0",
"intro.js": "^2.9.3",
"jquery-countdown": "^2.2.0",
"jquery-locationpicker": "^0.1.12",
"jquery-ui": "^1.12.1",
"jstree": "^3.3.8",
"ladda": "^1.0.5",
"laravel-file-manager": "~2.5.4",
"moment": "^2.24.0",
"nodejs-latest": "^1.1.0",
"orgchart": "^2.1.7",
"page-scroll-to-id": "^1.6.3",
"parsleyjs": "^2.9.1",
"plyr": "~3.6.5",
"pnotify": "^3.2.1",
"print-this": "^1.15.1",
"sharer.js": "^0.3.8",
"spin": "0.0.1",
"summernote": "^0.8.12",
"sweetalert": "^2.1.2",
"sweetalert2": "^8.18.1",
"switchery": "0.0.2",
"typeahead": "^0.2.2",
"vue-axios": "^2.1.5",
"vue-router": "^3.1.3",
"vuex": "^3.6.2",
"webui-popover": "^1.2.18",
"wowjs": "^1.1.3",
"x-editable": "^1.5.1"
}
}
Any ideas how to fix this?
I am trying to install the Vue Filemanager to my package.json. However, when I try to install the package using npm install and npm run dev I get this error:
ERROR in ./resources/assets/js/file-manager/FileManager.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- [email protected] (/var/www/node_modules/vue/dist/vue.runtime.mon.js)
- [email protected] (/var/www/node_modules/vue-template-piler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-piler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-piler to the latest.
I have vue-loader 7.11.2 installed (its a leagacy project). I did not find any instructions how to reinstall vue-loader, but upgrading vue-template-piler alone did not work.
I also tried the following solutions:
https://github./vuejs/vue-loader/issues/470#issuement-292971628 Did not work
https://stackoverflow./a/43398218/2311074 could not use it, because my versions of vue and vue-template-piler are higher
https://stackoverflow./a/51887838/2311074 same with, versions are too low
https://stackoverflow./a/48368175/2311074 did not work
https://stackoverflow./a/63777607/2311074 did also not work
Here is my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^5.2.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"lodash": "^4.17.15",
"resolve-url-loader": "^3.1.0",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"vue": "2.6.10",
"vue-template-piler": "^2.6.14"
},
"dependencies": {
"ajv": "^6.10.2",
"animate.css": "^3.7.2",
"bloodhound-js": "^1.2.3",
"bootstrap": "^3.4.1",
"bootstrap-editable": "^1.0.1",
"bootstrap-sweetalert": "^1.0.1",
"bootstrap-switch": "^3.4.0",
"bourbon": "^5.1.0",
"clipboard": "^1.7.1",
"codemirror": "^5.49.0",
"d3": "^4.12.0",
"daterangepicker": "^2.1.27",
"dropzone": "^5.5.1",
"echarts": "^3.8.5",
"express": "^4.17.1",
"flag-icon-css": "^2.9.0",
"flat-social-icons": "0.0.1",
"flipclock": "^0.8.2",
"formatter": "^0.4.1",
"google-maps": "^3.3.0",
"intro.js": "^2.9.3",
"jquery-countdown": "^2.2.0",
"jquery-locationpicker": "^0.1.12",
"jquery-ui": "^1.12.1",
"jstree": "^3.3.8",
"ladda": "^1.0.5",
"laravel-file-manager": "~2.5.4",
"moment": "^2.24.0",
"nodejs-latest": "^1.1.0",
"orgchart": "^2.1.7",
"page-scroll-to-id": "^1.6.3",
"parsleyjs": "^2.9.1",
"plyr": "~3.6.5",
"pnotify": "^3.2.1",
"print-this": "^1.15.1",
"sharer.js": "^0.3.8",
"spin": "0.0.1",
"summernote": "^0.8.12",
"sweetalert": "^2.1.2",
"sweetalert2": "^8.18.1",
"switchery": "0.0.2",
"typeahead": "^0.2.2",
"vue-axios": "^2.1.5",
"vue-router": "^3.1.3",
"vuex": "^3.6.2",
"webui-popover": "^1.2.18",
"wowjs": "^1.1.3",
"x-editable": "^1.5.1"
}
}
Any ideas how to fix this?
Share Improve this question asked Jun 7, 2021 at 10:52 AdamAdam 29.2k27 gold badges185 silver badges273 bronze badges 2- how did you fixed it? – FAZAL HAKIM Commented Aug 8, 2022 at 8:59
- @FAZALHAKIM I changed the version so that they match in package.json, removed nodes folder and reinstalled – Adam Commented Aug 8, 2022 at 10:51
1 Answer
Reset to default 5vue and vue-template-piler must have the same version number. This also cost me some nerves once.