How to convert a project from npm to yarn by default - reactjs

My project was initialized using npm and for a long time I had been working with npm, now I wanted to switch to yarn, since this solves some problems, the question is how to create-react-app so that by default it offers to update using yarn instead of npm
That is, yes, I can update my packages with yarn, but I would like create-react-app itself to offer an update using yarn

First, you need to have yarn installed in your computer.
Follow instruction on https://classic.yarnpkg.com/en/docs/install
Then, create-react-app will use yarn by default, as explained here:
https://create-react-app.dev/docs/getting-started/#selecting-a-package-manager
Note:
If you are trying to update an already existing app, then delete package-lock.json and node_modules, and install dependencies again with yarn:
rm -rf node_modules
rm package-lock.json
yarn install // will create a new yarn.lock file

Did you try:
yarn create <starter-kit-package> [<args>]
e.g:
$ yarn global add create-react-app
https://classic.yarnpkg.com/en/docs/cli/create/

I just delete npm from my project and leave only yarn localy and its work fine

Related

Problems with installing SASS React

I want to install SASS to my react app.
I try yarn add node-sass my console return error:
./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)
Node Sass version 7.0.1 is incompatible with ^4.0.0.
I found advice to uninstall node-sass and install sass. I did it, but then I have got this error:
../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:
/Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
/Users/(...)/node_modules/webpack/lib/NormalModule.js
/Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
/Users/(...)/node_modules/webpack/lib/Compiler.js
/Users/(...)/node_modules/webpack/lib/webpack.js
/Users/(...)/node_modules/react-scripts/scripts/start.js
I try to upgrate yarn, add sass-loader, nothing helps
Do this in your package json
"node-sass": "npm:sass#^1.49.9",
React still asks for node-sass after removing it and replacing with sass so you can alias it like this and now react will use sass
Maybe try updating your project's react-scripts, as doing so fixed the issue for me.
I was having the same issue - saw advice elsewhere to switch node-sass out for sass, and then had the same errors mentioned in the OP. Tried Mark O's solution to alias sass, which worked. However, then I tried setting up absolute imports in my project (with jsconfig.json in the way described here), and that was mysteriously failing too.
I then realized that my project had a very old version of react-scripts for some reason, as it was on 2.x.x. So I swapped react-scripts in my package.json to be "react-scripts": "4.0.3", ran npm install, did npm run start and now absolute imports work. I then tried using sass instead of node-sass again and that works too (npm uninstall node-sass, then npm install sass).
try stopping the current development server, and install node-sass again.
I was having similar problem. These steps fixed my problem.
Delete node_modules rm -rf node_modules
Delete package-lock.json rm package-lock.json
Run npm install or yarn install
I am using;
node-sass: ^6.0.1
npm: 7.24.2
node: v16.13.0

Change yarn to npm when using npx install react-create-app

I already uninstalled yarn but when I run node package execute (npx) create-react-app, yarn lock is still there but i can run it with node package manager (npm) start. How can I get I back to package-lock json or npm version when i create-react-app using npx create-react-app.
I wanna use npm for react and react-native projects.
Just delete the yarn.lock and run npm install and it will generate a package-lock.json.
package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json

How to make create-react-app use npm instead of yarn?

I kind of rushed into creating a React app based on a tutorial that used yarn. Now I'm going to re-create the app from scratch because I'm not satisfied with the reactstrap library, and I'd like to switch to react-bootstrap.
I've re-installed node. However, when I run create-react-app, it says to use "yarn" instead of "npm" as follows:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-test
yarn start
I'd like to use npm because it seems like it's more widely used and there are more examples based on it. Am I stuck with yarn, or can I go ahead and use npm?
You can either
1) Remove yarn.lock, and running npm i,
or
2) Run create-react-app app --use-npm
1 ⇢ If you have installed create-react-app then use:
create-react-app --use-npm
2 ⇢ If you are using npx command then use:
npx create-react-app --use-npm
3 ⇢ For existing yarn app, remove the yarn.lock file and run:
npm i
or
npm install
Install create-react-app npm i -g create-react-app --use-npm
Go to desired path using cd command
Add --use-npm create-react-app my-app-name --use-npm
This command will create a folder with the name that you mentioned inside your current path . This folder consists all necessary configuration files needed for a starter code for react application
# Run this to create-react-app using npm
npx create-react-app my-app
# Or run this to create-react-app using yarn
yarn create react-app my-app
I dont know if this helps. But I was having the same problem and did this
npx expo-cli init --npm
and it installed with npm
hope this helps you or someone in the future
For latest versions, the flag is changed to --npm
So if you want to use npm then use it like
npx react-native init YourProject --npm

did i install create-react-app incorrectly?

I want to try React on my Mac, but I face some difficulties when using it.
I installed create-react-app globally with
npm install -g create-react-app
But everytime I create a new project I have a huge node_modules folder in my project folder. AFAIK I don't need node_modules folder in every project if create-react-app installed globally. So what's the problem?
When I tried to uninstall create-react-app to install it again (just to be sure I installed it globally) I get an error saying
npm remove -g create-react-app
Error: EACCES: permission denied, unlink 'usr/local/bin/create-react-app'
So what do I do in this case?
The node_modules folder you see for every project is node_modules for that specific project. This is how all javascript projects that use npm work. You don't want all the dependencies of every project installed globally. That would run into all kinds of issues with different versions of packages etc.
This error indicates that you probably ran npm install -g create-react-app as either root or as sudo like so: sudo npm install -g create-react-app. Try running sudo npm remove -g create-react-app and see if that works.
I couldn't use the new version of create-react-app with npx, so I tried to remove via the command npm uninstall -g create-react-app. After that when I checked it still has "installed". So I have removed manually
rm -rf /usr/local/bin/create-react-app
But everytime I create a new project I have a huge node_modules folder
in my project folder.
That node_modules folder store all the local dependencies for that particular project with specific versions as mentioned in package.json and its dependencies also. It is required for every project, unless all dependencies of your project are global and match the versions perfectly which never would be the case AFAIK.
Use npm uninstall -g package_name for removing package.
Also its better if you use npx for create new react projects. But this would only work properly if npm version is above 5 and you have to uninstall global create-react-app first.
npx create-react-app my-app
I hard similar issue with mine. I did
npm uninstall -g create-react-app
and it worked.
this may sound odd but it work many times
if this kind of error come than run code in your terminal
npm uninstall -g create-react-app
if not work than without any headache run
npm i create-react-app
in your root folder this will update the react app in your system after this untill next latest version you can enjoy with
npx i create-react-app my-app

Switch to npm for create-react-app

I recently installed yarn on my machine but was using npm before. For my current project in React I want to use npm again.
However, if I run create-react-app it is built with yarn.
How can I switch so that it is created with npm?
You can use the --use-npm flag:
create-react-app my-project --use-npm
If it's an existing project you can just remove yarn.lock and continue using it with npm.

Resources