Laravel mix vue-template-compiler must be installed as a peer dependency - laravel

i got a fresh laravel installation, everything compile well but when I install vuex or vue router through npm, compiling wont work anymore, i got this error:
Error: [vue-loader] vue-template-compiler must be installed as a peer
dependency, or a compatible compiler implementation must be passed via
options.

The vue and vue-template-compiler module version must be the same in your package.json.
This was my code:
"devDependencies": {
"vue": "^2.5.17",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.21"
},
I changed the vue version to 2.5.21, then ran npm update to update the base version of VueJS.

npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev

Related

npm run dev can not install webpack cli

I have a laravel application with the below config:
laravel version 7.30.4
npm version 6.14.6
node version 12.18.3
When I want run npm run dev, this question is asked:
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
Do you want to install 'webpack-cli' (yes/no):
After typing yes, this error is showed:
Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.resolve (internal/modules/cjs/helpers.js:78:19)
at runCli (C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js:50:26)
at C:\Users\SibCo\AppData\Roaming\npm-cache\_npx\5852\node_modules\webpack\bin\webpack.js:139:5
at processTicksAndRejections (internal/process/task_queues.js:97:5) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\SibCo\\AppData\\Roaming\\npm-cache\\_npx\\5852\\node_modules\\webpack\\bin\\webpack.js'
]
}
Try installing webpack globally:
npm install -g webpack webpack-cli
If you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.
Example:
"serve": "webpack serve --config config/webpack.dev.js --progress"
You might want also to check this comment on GitHub:
NPM package.json scripts are a convenient and useful means to run locally installed binaries without having to be concerned about their full paths. Simply define a script as such:
For webpack-cli 3.x:
"scripts": { "start:dev": "webpack-dev-server" }
For webpack-cli 4.x:
"scripts": { "start:dev": "webpack serve" }
I updated my npm version to v7.11.2 and delete node_modules and ran :
npm install
again, and it worked for me.

How can i downgrade Bootstrap 4 to 3.3.7 for Laravel

I am developing a laravel project.
I have the latest version of bootstrap (4.0.0) in my package.json.
How can I downgrade from bootstrap 4.0.0 to 3.3.7 for my laravel Project?
You can install Bootstrap using npm:
npm install bootstrap#3 --save
For specific version - npm install bootstrap#3.3.7 --save
You just need to edit your package.json file
Replace:
"bootstrap": "^4.0.0",
to
"bootstrap": "^3.3.7",
and run npm install
That's all you need to do

NPM run watch resulting in error Laravel 5.7

I am receiving this error when I try to run npm run watch
Error: Cannot find module 'C:\wamp64\www\node_modules\laravel-mix\setup\webpack.config.js'
I am currently using
Laravel Framework 5.7.16
NPM 6.4.1
Thank you in advance
Edit: yes, I have run npm install
You have to first install your node modules with:
npm install
It seems that you don't have the package Laravel-mix, install it running:
npm install laravel-mix --save-dev
Also check if you have your webpack.config.js inside the main folder of your app, if not check for the docs on how to get it: https://laravel-mix.com/docs/3.0/installation

How to see which Vue Version is installed in Laravel and how to update?

In package.json I see the line: "vue": "^2.1.10", but doing npm update I see: vue#2.5.13.
Which Vue version is installed in my Laravel App? Is there another way to see it?
And how would you update Vue to Version 2.5.13 if it is still on 2.1.10?
Go to package.json under dependencies you can find "vue": "^2.1.10" if you wish to change version, just edit to the version you want and run npm update or npm install
Or if you wish to do it through npm then
npm remove vue
npm install vue#2.X.X --save

Error: Cannot find module 'gulp-sass'

When I compile with gulp, I got an error like below. How can I fix it?
module.js:339
throw err;
^
Error: Cannot find module 'gulp-sass'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/flyscoot.com/gulpfile.js:2:12)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
Just do npm update and then npm install gulp-sass --save-dev in your root folder, and then when you run you shouldn't have any issues.
Edit your package.json. Change:
"gulp-sass": "^2.3.2"
to
"gulp-sass": "3.0.0"
Delete the node_modules folder and run npm install again.
Source: https://github.com/codecombat/codecombat/issues/4430#issuecomment-348927771
Did you check this question?
May be possible solution is:
rm -rf node_modules/
npm install
I had the same problem, and I resolve doing this npm update. But I receive the message about permission, so I run:
sudo chwon -R myuser /home/myUserFolder/.config
This set permissions for my user run npm comands like administrator. Then I run this again:
npm update
and this:
npm install gulp-sass
Then my problem with this was solved.
Try this:
npm install -g gulp-sass
or
npm install --save gulp-sass
I had the same problem on my new Windows 10 machine. I had to intall the Windows build tools with npm install -g windows-build-tools. (https://github.com/Microsoft/nodejs-guidelines/blob/master/windows-environment.md#environment-setup-and-configuration)
i was also facing the same issue,
The possible solution is to install the gulp-sass module, but if you will run the below command npm install -g gulp-sass or npm install --save gulp-sass, This is not going to be updated on node-sass project's end.
This version of node-sass is missing (returns a 404) and google web-starter-kit v0.6.5 has depended on it for a long time, since Dec 2016. So, it has been working for a long time and must have just disappeared.
Downloading binary from
https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
Cannot download
"https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":
HTTP error 404 Not Found
The only workaround is to upgrade node-sass:
npm i gulp-sass#latest --save-dev to fix the issue.
I had same error on Ubuntu 18.04
Delete your node_modules folder and run
sudo npm install --unsafe-perm=true
Make sure python is installed on your machine, Python is required for node-sass.
I had this issue for days looking for answers. My error log was similar to this npm just won't install node sass
The only problem was the node version. Maybe it can help some of you.
I downgraded my Node.js from 9.3.0 to 6.12.2 and run:
npm update
In the root folder where package.json is located, run npm outdated. You'll get outdated packages returned with some details. In those details, you'll see the current version number of the outdated package.
After then, open the package.json file and manually change the version number of the corresponding package.
Then delete the node_modules folder and run npm install. It should solve this issue.
I ran : npm i gulp-sass#latest --save-dev
That did the magic for me
Ive faced the same troubles with gulp-sass in my VSCode environment.
Also, I was observing a lot of fails during npm installing and I could not start gulp (as outcome).
The way how I fixed it:
delete packages
npm i
npm i gulp-sass --save-dev
Now it works.
Those who are getting this error, please downgrade the Node.js you are using.
Step 1 :
Uninstall the one you are using and install the version you prefer. I installed v6.12.3. My previous Node.js version was v9.4.0.
Step 2 :
Download Node.js.
Hope this will work.
I worked with Yarn and I got the same issue and I solve it doing this:
delete node_modules
yarn install
yarn upgrade
yarn install gulp-sass --save-dev
Try this to fix the error:
Delete node_modules directory.
Run npm i gulp-sass#latest --save-dev
Solution:
const sass = require('gulp-sass')(require('sass'));
npm install gulp-sass sass

Resources