How to properly install react-scripts, as dependenc or as devDependency? - react-scripts

I see in different projects react-scripts installs as dependency or as devDependency and all works correctly in all projects.
But how to properly install it?
UPD:
npm i -D react-scripts
or
npm i react-scripts
?
In Visual Studio 2022, React template project has react-scripts in "dependencies", but ReactRedux template project has react-scripts in "devDependencies"
so, for react-scripts it doesn't matter how to install it, or exists any features?

as a shortcut of --save-dev you can use this :
npm i -D <some-package>

first you need to init npm: npm init
then install packages or script (as DevDependency): npm i <package/s> --save-dev

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!

Replace Node-Sass with Dart-Sass in Create React App v3.x

Has anybody done this successfully yet? I currently have node-sass installed in my CRA project and I'm trying to replace it with dart-sass but am experiencing difficulty because the CRA error output is telling me that I need to have node-sass installed. Is there any way to let the underlying CRA config know to use my installed dart-sass package instead of node-sass?
There is this closed issue on CRA repository, so you probably can easily migrate from node-sass to Dart Sass just running a few commands.
First of all check your yarn.lock or package-lock.json to know if the version of the sass-loader that your react-scripts depends on is 7.2.0 or later.
If so, all that you need is run the following commands:
yarn remove node-sass
yarn add sass
In my case after that I had to remove the node_modules directory and ran the yarn install again due to an issue stating the app.
Notes:
The react-scripts version I'm using is 4.0.0
The npm lib for Dart Sass is sass
The use of node-sass is deprecated since 26 October 2020
If you are using npm > 6.9 you can create an alias like so
npm install node-sass#npm:sass
it will install dart-sass and you will be able to keep your CRA configuration.
I had success with:
npm uninstall node-sass
npm install ci

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

Ionic / Cordova installation failure

Can you help me to resolve the problem with Ionic and Cordova shown in the screenshot below?
Update to latest npm and run as non-admin (if you were) and give it a try again.
npm install -g npm
or first try updating packages
npm update -g
Update npm to latest version and check again.
npm install -g npm
If problem persists then update the node also.
Then you are good to go.

Resources