Error while compiling with Laravel Mix - Vue - php

I've been using Laravel 8 beside Vue Js and they worked well together. I tried to start a project with Laravel and Vue Js again, but after a week it gave me an error. I used the commands below:
Laravel v8.26.1 (PHP v7.4.3)
composer create-project --prefer-dist laravel/laravel <project_name>
It works fine, after that:
npm install
Works well, too
But here's the error when I try running npm run dev
npm run dev
> # dev <project_path>
> npm run development
> # development <project_path>
> mix
Error: You are using an unspported version of Node. Please update to at least Node v12.14
at assertSupportedNodeVersion (<project_path>/node_modules/laravel-mix/src/Engine.js:6:15)
at executeScript (<project_path>/node_modules/laravel-mix/bin/cli.js:58:5)
at Command.program.command.description.option.action.cmd (<project_path>/node_modules/laravel-mix/bin/cli.js:44:13)
at Command.listener [as _actionHandler] (<project_path>/node_modules/commander/index.js:426:31)
at Command._parseCommand (<project_path>/node_modules/commander/index.js:1002:14)
at Command._dispatchSubcommand (<project_path>/node_modules/commander/index.js:953:18)
at Command._parseCommand (<project_path>/node_modules/commander/index.js:979:12)
at Command.parse <project_path>/node_modules/commander/index.js:801:10)
at Command.parseAsync (<project_path>/node_modules/commander/index.js:828:10)
at run (<project_path>/node_modules/laravel-mix/bin/cli.js:47:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
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! /home/user/.npm/_logs/2021-02-06T07_19_07_707Z-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! /home/user/.npm/_logs/2021-02-06T07_19_07_767Z-debug.log
package.json
{
"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": {
"axios": "^0.21",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.10"
},
"dependencies": []
}
I didn't do something special or configure anything!
Thanks in advance ;D

You have to upgrade your node so try these commands:
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
check node version by:
sudo node -v
it must show something like v14.*
You may need to restart your terminal to see the updated node version.
And then do npm run dev

Related

Trying to deploy Laravel app with tailwindcss on frontend. But, when i execute npm run dev i get an error

When npm run dev is being executed in cmd, i get an error saying that i need postcss v8 and i already have postcss v8.3. Is it possible that tailwind requires exact version that is 8 even tho newer versions are being released. Everything is set up "right", like its said in their documentation. This is the error i get, any suggestions are welcome.
laravel-movies-example#1.0.0 dev C:\xampp\htdocs\laravel-movies-example
npm run development
laravel-movies-example#1.0.0 development C:\xampp\htdocs\laravel-movies-example
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 2 errors 1:37:09 PM
error in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at C:\xampp\htdocs\laravel-movies-example\node_modules\webpack\lib\NormalModule.js:316:20
at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:208:9
at processTicksAndRejections (internal/process/task_queues.js:93:5)
error in ./resources/css/app.css
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12
# ./resources/css/app.css 2:14-142
Asset Size Chunks Chunk Names
/js/app.js 597 KiB /js/app [emitted] /js/app
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at C:\xampp\htdocs\laravel-movies-example\node_modules\webpack\lib\NormalModule.js:316:20
at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:208:9
at processTicksAndRejections (internal/process/task_queues.js:93:5)
# ./resources/css/app.css
ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12
# ./resources/css/app.css 2:14-142
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! laravel-movies-example#1.0.0 development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the laravel-movies-example#1.0.0 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! C:\Users\PC\AppData\Roaming\npm-cache_logs\2021-05-27T11_37_16_434Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! laravel-movies-example#1.0.0 dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the laravel-movies-example#1.0.0 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! C:\Users\PC\AppData\Roaming\npm-cache_logs\2021-05-27T11_37_16_514Z-debug.log
Try replacing your package.json with a package.json from a clean project.
package.json from a clean project:
{
"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/forms": "^0.2.1",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.1.0",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.2"
}
}

Laravel 7: Unable to Run Dev on Fresh Install

I am currently performing these terminal commands:
composer create-project --prefer-dist laravel/laravel:^7.0
composer require laravel/ui:^2.4
php artisan ui bootstrap --auth
npm install && npm run dev
This returns the following error
sh: mix: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! # development: `mix`
npm ERR! spawn ENOENT
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! /home/jonahmar/.npm/_logs/2021-02-23T15_46_54_252Z-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! /home/jonahmar/.npm/_logs/2021-02-23T15_46_54_277Z-debug.log
I am unable to fix or identify the issue, I have performed the following in an attempt to fix the issue:
npm rebuild node-sass
npm install --global cross-env
npm cache clean --force
npm install laravel-mix --save-dev
To no avail, I am also getting a warning prior to running this command:
npm WARN lifecycle The node binary used for scripts is /home/jonahmar/nodevenv/onyx.website.io/12/bin/node but npm is using /opt/alt/alt-nodejs12/root/usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
The current web-server is Litespeed Enterprise, with the latest version of composer, and node.
{
"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": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
}
}

error in npm install && npm run dev when installing breeze

Im new to Laravel and wanted to use breeze authentication in my Laravel app.
I created my project and migrate my database tables then based on breeze tutorial I run
composer require laravel/breeze --dev
and
php artisan breeze:install
successfully. but I got these errors after running this code
npm install && npm run dev
and now its the result. can anyone help me?
F:\kishcharkh>npm install && npm run dev
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.2.7(node_modules\chokidar\node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Invalid protocol: 127.0.0.1:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#~2.1.2
(node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Invalid protocol: 127.0.0.1:
> # dev F:\kishcharkh
> npm run development
> # development F:\kishcharkh
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-template-compiler --save-dev --production=false
npm ERR! Invalid protocol: 127.0.0.1:
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\masih\AppData\Roaming\npm-cache\_logs\2021-01-12T09_52_45_253Z-debug.log
F:\kishcharkh\node_modules\webpack-cli\bin\cli.js:93
throw err;
^
Error: Command failed: npm install vue-template-compiler --save-dev --production=false
npm ERR! Invalid protocol: 127.0.0.1:
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\masih\AppData\Roaming\npm-cache\_logs\2021-01-12T09_52_45_253Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --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! C:\Users\masih\AppData\Roaming\npm-cache\_logs\2021-01-12T09_52_45_353Z-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.
and here is the package.json file:
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"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 --disable-host-check --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 --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#tailwindcss/forms": "^0.2.1",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.1.0",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"tailwindcss": "^2.0.2"
}
}
I did fight with that one day ago. I discoverd that if the error persist after of:
rm -rf node_modules
rm package.lock.json
npm cache clear --force
npm install
npm run dev
Then the error was that my node was outdated. Update to lastest version

Can't compile sass using "npm run watch" - Laravel

Ok. I'm taking a course on Laravel through udemy, and all the styling is done in sass. I followed the same steps as the instructor but I'm getting errors whereas his worked fine. Can someone please help. I'm on windows and he is on MAC
I installed Laravel using composer, then migrated my database tables.
The next thing we had to do was install node and stuff using
npm install
Here is where the problems lay. I did not get a node modules folder, whereas he did. To get a node modules folder I needed to run
npm install node-laravel
But the folders contained different contents.
After i added sass folders into laravel, and to compile them he ran
npm run watch
SASS compiled perfectly for him, whereas I got this error
> # watch C:\Users\andre\Dropbox\Code\Personal\CodingPhase\PHP-7\DesignSt
orm
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --wa
tch --progress --hide-modules --config=node_modules/laravel-mix/setup/web
pack.config.js
The system cannot find the path specified.
events.js:183
throw er; // Unhandled 'error' event
^
Error: spawn node_modules\webpack\bin\webpack.js ENOENT
at notFoundError (C:\Users\andre\AppData\Roaming\npm\node_modules\cro
ss-env\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (C:\Users\andre\AppData\Roaming\npm\node_modules\cros
s-env\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (C:\Users\andre\AppData\Roaming\npm\node_modu
les\cross-env\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198
:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # watch: `cross-env NODE_ENV=development node_modules/webpack/bi
n/webpack.js --watch --progress --hide-modules --config=node_modules/lara
vel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch script.
npm ERR! This is probably not a problem with npm. There is likely additio
nal logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\andre\AppData\Roaming\npm-cache\_logs\2018-01-27T20
_14_57_489Z-debug.log
EDIT
This is the package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "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",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js 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": "node node_modules/cross-env/dist/bin/cross-env.js 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": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"nodejs": "0.0.0"
}
}
npm install is the command that tells npm (Node Package Manager) to install the packages listed in package.json. The command npm install node-laravel tells npm to install the package node-laravel which is a "[...] Node.js library for inter-operating with Laravel.". Running npm install node-laravel is creating a node_modules folder because you're installing a package, but it's the wrong package: node-laravel is not what you're looking for.
The problem you're having is that npm install is not installing the dependencies listed in package.json so let's work through why that might be.
There are 2 types of dependencies listed in package.json, dependencies and devDependencies and as you can see from your package.json, all of your dependencies are in devDependencies. devDependencies are only installed when you're in a development environment, they are not installed in a production environment. This is (roughly) what happens:
You run npm install
npm installs everything listed in dependencies
npm determines what type of environment you're in
If you are in development npm will also install the packages listed in devDependencies
Your dependencies are listed as only nodejs so there is nothing for npm to install and therefore npm does not need to create a node_modules folder. Therefore, the problem you're having (npm is not installing packages listed in devDependencies) is most likely because npm believes you're in production.
There are 2 options:
You can keep you environment set to production and ask npm to install your devDependencies regardless by running npm install --only=dev
You can update your environment configuration to correctly set the environment to development by running npm config set -g production false then run npm install again
The second option is a solution to the problem, the first is a workaround. I recommend option 2.

Laravel getting error in npm run dev command

I am getting below error while running
'npm run dev'
command.
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --p
rogress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "run" "watch"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! # watch: `cross-env NODE_ENV=development node_modules/webpack/bin/webpa
ck.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/
webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch script 'cross-env NODE_ENV=development node_modul
es/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_module
s/laravel-mix/setup/webpack.config.js'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js
--watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpac
k.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
Can anybody tell me what is the issue here?
Thanks
I've had the same issue recently after upgrading Laravel app. You just need to install the package:
npm install cross-env
First you need to perform the following steps
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install --global cross-env
npm install
Then try restarting your terminal and make sure you are not using the integrated terminal (e.g on visual studio code) when running "npm run dev". Instead, try running the "npm run dev" command on a different powershell terminal window. Works for me everytime.

Categories