npm run dev can not install webpack cli - laravel

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.

Related

Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed

I recently created a new laravel 8 project using Breeze for the authentication and tailwind css. All worked perfectly when running npm run watch but once I run npm run prod I ran into errors. I noticed that the Tailwind docs mention that there are PostCSS issues so you need to unistall and run
npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
I done that however every time I run npm run prod now the build quits at 98% and says
Additional dependencies must be installed. This will only take a moment.
Running: npm install postcss#^8.1 --save-dev --legacy-peer-deps
npm WARN browser-sync-webpack-plugin#2.2.2 requires a peer of webpack#^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.
Finished. Please run Mix again.
This auto updates PostCSS to 8.1 every time.
After that if I run npm run prod again it does the exact same message over and over.
I've tried removing the browsersync plugins and trying again but it still doesn't work.
Anyone ran into this or got a solution?
laravel-mix v6 now supports PostCSS8
According to tailwind docs, it suggests to use npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
With the new Mix v6, run npm install tailwindcss#latest postcss#latest autoprefixer#latest
After this, npm run prod will run the way it should.
you must upgrade laravel mix using the following command
npm install laravel-mix#latest
As Digvijay mentioned above the new Mix v6 now supports PostCSS 8. So run:
npm install tailwindcss#latest postcss#latest autoprefixer#latest
After the when you run npm run prod you will still get this message:
Additional dependencies must be installed. This will only take a moment.
Running: npm install browser-sync browser-sync-webpack-plugin#2.2.2 --save-dev --legacy-peer-deps
npm WARN browser-sync-webpack-plugin#2.2.2 requires a peer of webpack#^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.
Finished. Please run Mix again.
To fix this just add sudo to the front of the npm command it ran:
sudo npm install browser-sync browser-sync-webpack-plugin#2.2.2 --save-dev --legacy-peer-deps
Now run npm run prod and it should work!

how to convert angular-cli.json to angular.json

when running "ng test" angular cli throws error
"The test command requires to be run in an Angular project, but a project definition could not be found."
npm install #angular/cli
ng test
wants to convert angular-cli.json to angular.json
Update Angular cli globally and locally, and migrate the old configuration .angular-cli.json to the new angular.json format by running the following:
npm install -g #angular/cli
npm install #angular/cli
ng update #angular/cli

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

Laravel Mix: These dependencies were not found:

I have a fresh install of Laravel 5.4. I as well have the folowing versions installed on my Windows PC
node: 6.11.0
npm:5.0.3
I have already run npm install, however, when i run npm run watch, i get the following error
> # watch C:\xampp\htdocs\tu
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active
Webpack is watching the files…
95% emitting
ERROR Failed to compile with 2 errors 12:12:42 AM
These dependencies were not found:
* C:\xampp\htdocs\tu\resources\assets\js\app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* C:\xampp\htdocs\tu\resources\assets\sass\app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
To install them, you can run: npm install --save C:\xampp\htdocs\tu\resources\assets\js\app.js C:\xampp\htdocs\tu\resources\assets\sass\app.scss
I've searched the internet but cant seem to get it working. Any help is appreciated.
I was having the exact same issue but Leo_Kelmendi's solution didn't work for me.
Searching on GitHub, I found there is a bug in NPM 5.2.0 that affects Laravel Mix. Read more about it here.
I had to revert NPM to its previous version in order to get my assets compiling again:
$ sudo npm install -g npm#5.1.0
Then, I removed all installed modules:
$ rm -rf node_modules/
$ npm cache clear --force
$ rm -rf package-lock.json
Notice that clearing the cache may take a while.
And, finally, I reinstalled node deps and run the dev script:
$ npm install
$ npm run dev
Try to revert to this package.json. You can find it here:
https://github.com/laravel/laravel/blob/c1643bf0c59b6864fc55e09cce3bfafc67d29e2a/package.json
And try to run it again, also make sure, there's a node_modules/moment folder.

Grunt not found error when deploying to Heroku

I'm getting the error below:
remote: sh: 1: grunt: not found
when I'm deploying my code to Heroku server.
My install scripts in package.json is like:
"scripts": {
"postinstall": "grunt heroku:production && bower install",
"test": "mocha",
"start": "node app.js"
}
I set heroku config like
heroku config:set NPM_CONFIG_PRODUCTION=false
Also I made
export BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git
but nothing has changed. I have grunt and grunt-cli in both dependencies and devDependencies.
So where am I wrong?

Resources