I use laravel 5.5, built-in webpack
Module build failed: Error:
Vue packages version mismatch:
- vue#2.5.2
- vue-template-compiler#2.4.4
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-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
what's wrong? there is my package.json
{
"devDependencies": {
"cross-env": "^5.0.5",
"laravel-mix": "^1.5.0"
},
"dependencies": {
"axios": "^0.16.2",
"bootbox": "^4.4.0",
"bootstrap": "^4.0.0-beta",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"marked": "^0.3.6",
"normalize.css": "^7.0.0",
"popper.js": "^1.12.5",
"vue": "^2.5.2",
"vue-loader": "^13.3.0",
"vue-localstorage": "^0.4.2",
"vue-markdown": "^2.2.4",
"vue-masked-input": "^0.5.2",
"vue-simplemde": "^0.4.5",
"vue-template-compiler": "^2.4.4",
"vue-upload-component": "^2.6.0-beta.3"
}
}
even if I change "vue-template-compiler" to 2.5.2 - it not helps
npm update --scripts-prepend-node-path=auto helps
re-install vue-loader or just delete node_modules folder and run
npm install
Using Laravel 5.4 / Webpack, I solved this with:
1.) npm install vue-loader
2.) npm install vue-template-compiler
Only runing npm install the problem was solved. Then, npm run dev and everything was ok.
Try to use the same version number:
"vue": "^2.5.2",
"vue-template-compiler": "^2.5.2",
Related
I'm new to shared hosting deployment and I need help to deploy an app on a shared hosting server that uses CPanel.
I have deployed thee same app before on a CPanel shared hosting, by zipping my files and uploading them to the subdomain. But as far as I am concerned, that is very wrong since all my development files are exposed to anybody
Second time I tried, I copied the files from the git repo via SSH, and the installing composer, but when I try to install node to use npm and run the command npm install and npm run dev. Surprise! I had errors such as Javascript heap out of memory Zone allocation failed and Aborted.
So I would like to know:
How to install properly node dependencies from a laravel package.json file on CPanel, without breaking down the server or misconfiguring something
Any help would be very appreciated. I there's a way to granmt or reward anyone here, I would like you to show me how.
I have to get this working before next saturday, therefore any help would be very nice.
This is my package.json, just in case you need it:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.1",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-mix-merge-manifest": "^2.0.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sweetalert2": "^10.16.0"
}
}
Thanks in advance.
So what happened here, is that I had to delete all node_modules folder. Then, I ran npm update --legacy-peer-deps command in order to have all packages according to the package.json file. After that, I could run
node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
without further complications.
I have started a new laravel project (my first). I have created some views and routs etc, but bootstrap is not working. I am using laravel 7.
I have followed these steps: https://www.techiediaries.com/laravel/how-to-install-bootstrap-in-laravel-6-7-by-example/ which seemed to work as it should
^which added bootstrap in the package.json file: but still it's not working.
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.11"
}
have I done anything wrong? do I have to link it in some way or another?
Any help is greatly appreciated!
Did you run:
npm run dev
after npm install? The webpage only says the first command.
Did you put these script src and css links to the head of the html?(after compile)
<link rel="stylesheet" href="css/app.css">
<script src="js/app.js"></script>
So i've tried researching this but none of the solutions are working. I think it's specifically an issue with some of my vue dependencies, potentially vue-loader, but I'm not sure what specifically to do to fix it. I have tried:
deleting node_modules and re-running npm install
npm update
i've tried removing vue-loader completely
tried adding, removing, and updating #vue/component-compiler-utils
tried changing the version of the above to three different things
tried running composer install and composer update
creating a new temp staging branch from master just in case it was some weird git error and building from that
What am I missing here? Every vue component on my staging site returns this same error. The weirdest thing is that the staging server is a direct clone of our production server, where all of this works completely smoothly and i get zero errors.
The Errors:
ERROR in ./resources/assets/js/components/component.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (/var/www/site/node_modules/#vue/component-compiler-utils/dist/parse.js:14:23)
at Object.module.exports (/var/www/site/node_modules/vue-loader/lib/index.js:67:22)
# ./resources/assets/js/app.js 60:29-81
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
I've tried installing these warnings' dependencies as well but still get the same error above, I'm including these because it's what pops up when i run my bash script and run npm install from my staging branch:
npm WARN eslint-plugin-vue#5.2.3 requires a peer of eslint#^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-eslint-parser#5.0.0 requires a peer of eslint#^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
package.json dependencies
"devDependencies": {
"axios": "^0.19.0",
"babel-preset-stage-2": "^6.24.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.2.0",
"eslint": "^6.1.0",
"eslint-config-standard": "^13.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.3",
"exports-loader": "^0.6.4",
"imports-loader": "^0.7.1",
"jquery": "^3.3.1",
"laravel-mix": "^4.1.2",
"lodash": "^4.17.11",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.10",
"vue": "^2.6.10"
},
"dependencies": {
"#vue/component-compiler-utils": "^3.1.1",
"ajv": "^6.10.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"braces": "^2.3.1",
"es6-promise": "^4.2.6",
"font-awesome": "^4.7.0",
"luxon": "^1.12.1",
"moment": "^2.24.0",
"popper": "^1.0.1",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"vue-datetime": "^1.0.0-beta.10",
"vue-datetime-picker": "^0.2.1",
"vue-full-calendar": "^2.7.0",
"vue-loader": "^15.8.3",
"vue-router": "^3.0.2",
"vue-template-compiler": "2.6.10",
"vue-wysiwyg": "^1.7.2",
"vuex": "^3.1.0",
"weekstart": "^1.0.0",
"whatwg-fetch": "^2.0.4",
"wkhtmltopdf": "^0.3.4"
}
}
I'm thinking it might have something to do with a specific version of a dependency? But nothing i've been trying from other stack overflow threads or google searches has been helping
Let me know if there's any code missing that may help
I had exacly the same problem and just figured it out, I hope this helps someone.
First I changed the vue template compiler to:
"vue-template-compiler": "2.6.11"
and the I also had to change the vue version to the latest realese, in my case:
"vue": "2.6.11"
Try running this command
npm update vue-template-compiler
Try this:
npm remove vue-template-compiler
npm remove vue
then
npm install vue-template-compiler#2.6.11
npm install vue#2.6.11
This will match the version of vue and vue-template compiler on your project.
The version of "vue-template-compiler" should match the version of "vue". If the dependency is declared as:
"vue": "^2.6.11"
Npm will possibly install vue#2.6.12, which is mismatched with the version of "vue-template-compiler". As of what updates between 2.6.11 and 2.6.12, you can refer to the release notes.
I had the same issue and I ran the command: npm update vue-template-compiler. All solved.
For yarn:
yarn remove vue vue-template-compiler
yarn add vue vue-template-compiler
yarn upgrade seemed to have errors.
If your project worked before, but then a subsequent install caused errors, another thing you can try instead of upgrading vue-template-compiler is to pin the vue build dependency versions in your package.json by using exact version numbers in dependencies or devDependencies, and in overrides to force sub-dependencies to their minimum specific versions where they were surely known to work.
Im using laravel 5.2
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.0.0",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-webpack": "^1.0.1",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"webpack": "^2.7.0"
},
"dependencies": {
"get-ssl-certificate": "^2.1.2",
"laravel-elixir-webpack-official": "^1.0.2",
"vuedraggable": "^2.16.0"
}
}
I tried both firefox and google chrome extension which says its disabled
This is the line that restrict this
devtools: process.env.NODE_ENV !== 'production'
to my two sense this must NOT happen.
Steps I took till now :
1- remove node_models install it again using npm install
2- replacing the vue file with a version provided in Vuejs.org
the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools!
What is causing this conflict! Im confused
thanks for any help
Okay long story short the problem caused because it was not compiling my files and devmode was off in the version it was complied before.
I was trying to use vue on laravel 5.2 , faced many problems so i decided to install
laravel 5.3 by :
composer create-project --prefer-dist laravel/laravel myapp "5.3.0"
after that I executed :
npm install
and it started to install the dependencies and all , when it was done I tested gulp command to see if its a success compile which it was. so I moved package.json package-lock.json and gulpfile.js from my Laravel 5.3 to laravel 5.2 run npm install again and all Done!
Im using laravel homestead 0.5.0, I have a fresh install laravel but whenever i try to do npm install--no-bin-links or npm install on the VM or on Powershell or CMD it always give an error.
Maximum call stack size exceeded. windows max path length i guess? anything I can do to avoid this? heres my package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.3.0"
}
}
im using windows 8.1 and virtual box 5
node version is 5.12.0
npm version is 3.10.5
any help is appreciated thanks
screenshot of the error