laravel npm run dev give error "webpack not installed" - laravel

i want use laravel mix with npm run dev but
this return error:
webpack not installed
Install webpack to start bundling:
$ npm install --save-dev webpack
npm ERR! code 1
npm ERR! path C:\Users\taher\Desktop\kalashomar
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\taher\AppData\Local\npm-cache\_logs\2021-01-02T08_34_28_436Z-debug.log
npm ERR! code 1
npm ERR! path C:\Users\taher\Desktop\kalashomar
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "npm run development"
i tried this commands:
npm install --save-dev webpack
yarn add webpack --save-dev
npm cache clean --force
npm install
npm install cross-env --save-dev
i also removed package-lock.json and yarn.lock and renistall but still return this error
please help

first of fall download node.js ( https://nodejs.org/en/ ) or update in your device.
after successfully installed, try this..
npm install ,
npm run dev

Related

How to solve npm run dev

Im trying to install npm for first time. When I run npm install, then npm run dev, it say webpack-cli must install.
After I install it, I got this error:
C:\Users\Lokman02Naza\Documents\laravel\pizzahouse> npm run dev
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
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
added 34 packages, and audited 1161 packages in 6s
53 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
[webpack-cli] Unknown argument: --hide-modules
? Which flags do you want to use? ...
√ --entry: The entry point(s) of your application e.g. ./src/main.js
√ Which flags do you want to use? · No items were selected
[webpack-cli]
Executing CLI
√ Which flags do you want to use? · No items were selected
[webpack-cli]
Executing CLI
[webpack-cli] Compilation finished
asset main.js 644 bytes [emitted] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Users\Lokman02Naza\Documents\laravel\pizzahouse'
webpack 5.3.2 compiled with 1 error in 57 ms
[webpack-cli] Compilation finished
asset main.js 644 bytes [emitted] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Users\Lokman02Naza\Documents\laravel\pizzahouse'
webpack 5.3.2 compiled with 1 error in 57 ms
npm ERR! code 1
npm ERR! path C:\Users\Lokman02Naza\Documents\laravel\pizzahouse
npm ERR! command failed pack/bin/webpack.js --pr
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Lokman02Naza\AppData\Local\npm-cache_logs\2020-10-30T03_40_34_931Z-debug.log
npm ERR! code 1
npm ERR! path C:\Users\Lokman02Naza\Documents\laravel\pizzahouse
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "npm run development"
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Lokman02Naza\AppData\Local\npm-cache_logs\2020-10-30T03_40_34_948Z-debug.log
How to I solve it?
I clean forgot step 1. I simply ran the following in my cmd console which solved my issue.
composer global require "laravel/installer"

Laravel 5.5 + Vue.js 2.x project not working on npm run dev

when I have created the new project for Laravel 5.5 + Vue.js 2.x , I have the problem. This is the message after I have run this.
npm install
npm run dev
> # dev /Volumes/Work/Work/Vue/CRUD
> npm run development
> # development /Volumes/Work/Work/Vue/CRUD
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
DONE Compiled successfully in 2830ms 6:01:15 PM
internal/child_process.js:325
throw errnoException(err, 'spawn');
^
Error: spawn EACCES
at _errnoException (util.js:1041:11)
at ChildProcess.spawn (internal/child_process.js:325:11)
at exports.spawn (child_process.js:493:9)
at Object.exports.execFile (child_process.js:208:15)
at Object.module.exports.fileCommand (/Volumes/Work/Work/Vue/CRUD/node_modules/node-notifier/lib/utils.js:53:13)
at NotificationCenter.notify (/Volumes/Work/Work/Vue/CRUD/node_modules/node-notifier/notifiers/notificationcenter.js:66:11)
at module.exports.WebpackNotifierPlugin.compilationDone (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack-notifier/index.js:62:18)
at Compiler.applyPlugins (/Volumes/Work/Work/Vue/CRUD/node_modules/tapable/lib/Tapable.js:61:14)
at emitRecords.err (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:268:11)
at Compiler.emitRecords (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Volumes/Work/Work/Vue/CRUD/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Volumes/Work/Work/Vue/CRUD/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:365:9)
at require.forEach.err (/Volumes/Work/Work/Vue/CRUD/node_modules/webpack/lib/Compiler.js:354:15)
at /Volumes/Work/Work/Vue/CRUD/node_modules/async/dist/async.js:421:16
at iteratorCallback (/Volumes/Work/Work/Vue/CRUD/node_modules/async/dist/async.js:998:13)
at /Volumes/Work/Work/Vue/CRUD/node_modules/async/dist/async.js:906:16
at /Volumes/Work/Work/Vue/CRUD/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:135:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/paladin2/.npm/_logs/2017-09-04T08_01_15_242Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/paladin2/.npm/_logs/2017-09-04T08_01_15_321Z-debug.log
Has anybody had the same problem in the past?
giving your user execute rights on node_modules does the trick: chmod -R u+x node_modules/
if npm update doesn't work try installing webpack manually by command.
npm install –save-dev npm-install-webpack-plugin
I had the same issue since this morning and I remembered that I updated my npm version lately.
EVen if I created a new project and ran
npm install && npm run dev
I got the same issue.
A temporary solution for me is/was to downgrade npm:
npm install -g npm#5.3
If I now run npm run dev everything works fine.
that issue cause of permission of that folder, I think.
when I set folder permission like this, all works fine on my computer.
chmod -R 765 [foldername]
Thanks.
I've installed without laragon or Virtual host. Got the same error that cross-env is not found.
After the hours of research I found the solution. Here is how I did:
npm install cross-env -g
npm update
npm install --save
after that npm run dev or npm run build
Boom! Laravel Mix Build Successful it is working.....

Laravel npm run dev returns TypeError: chunk.sortModules is not a function

When I try to run npm run dev, I get this error. This is a fresh install, and I have it working with the same setup in another folder. I get the same error on another computer.
Versions
NPM: 5.3.0
Node: v8.4.0
test ⚑ → npm run dev master ✗ 2d
> # dev /Users/myuser/Code/testing/test
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
78% advanced chunk optimization/Users/myuser/Code/testing/test/node_modules/extract-text-webpack-plugin/dist/index.js:188
chunk.sortModules();
^
TypeError: chunk.sortModules is not a function
at /Users/myuser/Code/testing/test/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
at /Users/myuser/Code/testing/test/node_modules/async/dist/async.js:3083:16
at eachOfArrayLike (/Users/myuser/Code/testing/test/node_modules/async/dist/async.js:1003:9)
at eachOf (/Users/myuser/Code/testing/test/node_modules/async/dist/async.js:1051:5)
at Object.eachLimit (/Users/myuser/Code/testing/test/node_modules/async/dist/async.js:3145:5)
at Compilation.<anonymous> (/Users/myuser/Code/testing/test/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
at Compilation.applyPluginsAsyncSeries (/Users/myuser/Code/testing/test/node_modules/tapable/lib/Tapable.js:206:13)
at Compilation.seal (/Users/myuser/Code/testing/test/node_modules/webpack/lib/Compilation.js:579:8)
at /Users/myuser/Code/testing/test/node_modules/webpack/lib/Compiler.js:493:16
at /Users/myuser/Code/testing/test/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/myuser/Code/testing/test/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/Users/myuser/Code/testing/test/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myuser/.npm/_logs/2017-09-04T13_55_30_770Z-debug.log
the issue seems to be related to difference in packages, just today I was updating webapacker version 3 which uses webpack version 3 in rails app and I was getting this same error. The issue stoped when I updated this packages to this versions in the package.json file:
"sass-loader": "^6.0.6"
"babel-loader": "7.1.2"
"webpack": "^3.6.0"
Thanks to the suggestion of this guy: https://github.com/rails/webpacker/issues/852#issuecomment-331764386
I suggest that if you are using these packages you change to these versions to see if it works for you also.
This worked for me. When I used Yarn instead.
rm -rf node_modules
brew install yarn
yarn
yarn run dev
First, remove the webpack plugin. Then install and build yarn using the following steps:
npm install remove-webpack-plugin --save-dev
yarn install
yarn build

Error installing and using laravel mix

I want to install Mix in laravel . I run "npm install --no-bin-links" in my IDE terminal or in CMD but I get this error: (my laravel version is 5.4.27)
D:\wamp64\www\laravelProject>npm install --no-bin-links
npm WARN deprecated node-uuid#1.4.8: Use uuid module instead
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "--no-bin-links"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! Maximum call stack size exceeded
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! D:\wamp64\www\laravelProject\npm-debug.log
I found!!
I remove node-modules then removed package-lock.json and ran
The following command helped me too:
npm cache clean --force
Also, you might need to add sudo in linux.

concurrently "npm run build:watch" "npm run serve" for angular-quickstart on Mac OS X fails

I followed the instructions on angular.io to setup and run an angular-quickstart (Angular 2) project on Mac OS X 10.12. Unfortunately I get the following error:
% npm start
> angular-quickstart#1.0.0 prestart /Users/will/Documents/Projects/test/angular2-test
> npm run build
> angular-quickstart#1.0.0 build /Users/will/Documents/Projects/test/angular2-test
> tsc -p src/
> angular-quickstart#1.0.0 start /Users/will/Documents/Projects/test/angular2-test
> concurrently "npm run build:watch" "npm run serve"
[0] Unknown option: `-l'
[0] Usage: tcsh [ -bcdefilmnqstvVxX ] [ argument ... ].
[1] Unknown option: `-l'
[1] Usage: tcsh [ -bcdefilmnqstvVxX ] [ argument ... ].
[0] npm run build:watch exited with code 1
[1] npm run serve exited with code 1
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/6.2.2/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.2.2
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart#1.0.0 start: `concurrently "npm run build:watch" "npm run serve"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart#1.0.0 start script 'concurrently "npm run build:watch" "npm run serve"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently "npm run build:watch" "npm run serve"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/will/Documents/Projects/test/angular2-test/npm-debug.log
I read all posts about angular-quickstart and mac unfortunately without finding anything that would help. I did upgrade nodejs and npm and also manually installed "concurrently" although this was probably not the problem. I can start both commands (npm run build:watch and npm run serve) separately and things seem to work ok (code gets automatically compiled on changes and the browser gets updated). So does anyone have an idea what might be the problem here?
Thanks!

Resources