react-native: switch from yarn to npm - react-native

Is there a step-by-step process to change a react-native project from using yarn as the package manager to using npm? All I can find after several days of searching are instructions to go from npm to yarn and a package called deyarn which doesn't seem to fully work for me. Does anyone have a good resource on this?

Try this :
Remove yarn.lock (don't need this file).
Remove folder node_modules
In package.json, change script use yarn to the same command with npm
Remove all global package of yarn (don't need to remove if you want to use npm for one project)
Remove yarn if you don't want to use it again.
Install npm (if you installed, ignore this step)
Install global and local package you need
Can you upload some error, you said that not fully work.
Edit:
If you want to change npm to yarn, it same:
Remove package-lock.json (don't need this file).
Remove folder node_modules
In package.json, change script uses npm to the same command with yarn
Remove all global package of npm (don't need to remove if you want to use yarn for one project)
Remove npm if you don't want to use it again.
Install yarn (if you installed, ignore this step)
Install global and local package you need
You can see CLI commands comparison for 3rd step

You can try taking the following steps:
Remove node_modules
Run npm install
This should work because npm and yarn use the same package.json.

The deyarn package worked brilliantly for me.
Note that it will only flag (not auto-update) any package-lock.json scripts that you may need to update.
Depending on your environment needs, you may also want to strip out the engines: yarn: '..' entry it adds to your package-lock.json.

You don't need to do anything just run npm start cmd then follow the same step as suggest.
I've covert my yarn project To npm see the image.
enter image description here
enter image description here
hope is work for you.
thanks happy coding.

Related

npm start install my package, but i'm running my project with yarn start

If I installed some package with NPM it will work and recognize it if I run my project with yarn start instead npm start?
Yes, it will still work after all the required packages are installed.
But you should not switch package Managers like that since you will generate two lock files if you use both to install packages. npm generates the package-lock.json and yarn will generate the yarn.lock file. I recommend you to stay with one or switch completely.
In runtime, it does not make any difference if you use yarn or npm.
npm run start and yarn start will do exactly the same.

Yarn lock file resource source changed from registry.yarnpkg.com to registry.npmjs.org

I recently npm installed a package into my Ruby on Rails application. The installation changed my yarn.lock file. Specifically, the "resolved" field for all my resources have changed from yarnpkg.com to npmjs.org.
From this:
d3-dsv#1:
version "..."
resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.8.tgz#..."
integrity ...
To this:
"d3-dsv#1":
"integrity" "..."
"resolved" "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.1.1.tgz"
"version" "..."
Is there a problem with these changes in this yark.lock file? Should I have done some yarn alternate to npm installing?
You can fix this issue by re-running yarn again.
To accomplish this, follow the steps below.
Remove the registry.npmjs.org section in your yarn.lock file.
Run the yarn command again.
$ yarn
This should rewrite the yarn.lock to change the registry from npm to Yarn.
The steps above should rewrite the yarn.lock file, and change the registry and text from npm to Yarn.
If you are using only public packages in your application then this will not cause many problems. You can go about your business as it is.Although there might be some complications when you authenticate for any of them at any point.
If you are using any private repositories, you have to re-register your packages with yarn and add credentials to them.
The following steps will help you.
Setup a private repo on npmjs.org and add a scope and your package (Lets name it boo)
Create a new project locally and upload it to the npm registry (let's call it blimp)
So when they are updated it will be #boo/blimp
Add the package to your new applications package.json by installing yarn add #boo/blimp
Remove the node_modules (rm -rf node_modules)
Try yarn install if there is an error in the lock file try re-creating one as follows
sed -ie 's,registry.yarnpkg.com/#boo,registry.npmjs.org/#boo,' yarn.lock
7. If that omits an issue like Request failed or something in that alley, try following
yarn config set registry https://registry.npmjs.org
At this point, you have tried lots of options. If this is still an issue in your system then you might have to move to `npm` package management. Follow the [yarn][2] repository for more updates.
Similar issues
yarn.lock should not include base registry
Support protocol-relative registry
Support for registry URLs without trailing slash
I suspect this happened to me because I installed something with npm install instead of yarn. I recognized my mistake, npm uninstalled the package, then yarn added the package, but then every entry in yarn.lock was changed to use npmjs.org instead of yarnpkg.com.
I did not commit the changes to source control, and the problem disappeared after I...
Deleted package-lock.json
Reverted the change to package.json in source control (i.e. removed the new package)
Reverted all changes to yarn.lock in source control
yarn added the package again
I am unsure if using npm install followed by yarn add is really what triggered the problem. Can anyone confirm?

Upgrade/update a node package in package.json without installing it?

This question applies to either npm or yarn and I would like to know if what I need to do can be done with one or the other or both. For the sake of clarity I will only refer to yarn commands as I would prefer the yarn solution.
I have a bash script where I conditionally yarn upgrade a node package that is guaranteed to be in the package.json file but has not yet been installed. I would like to potentially reduce the number of times I call yarn install. As it stands I need to call yarn install and then yarn upgrade but I don't need to because I will be calling yarn install later in the script.
I think I can save a call to yarn install (via a yarn upgrade) in my script by simply updating the version number for the node package I want upgraded in package.json but then do not actually install any of those files since I will be calling yarn install at a later time in the script.
I would simply like to change the version number of a specific node package without installing any files using either a yarn or npm command. If this is not possible is this a good use case to parse package.json by hand and insert the version number with brute force?
Dependencies can be added to your package.json without installing them by using npm-add-dependencies
You can use it on-they-fly via npx, for example:
npx add-dependencies browser-sync-webpack-plugin#^2 browser-sync#^2 --dev
This will add browser-sync-webpack-plugin version ^2 and browser-sync version 2^ to devDependencies in your package.json

Patching a NPM package locally with patch-package, not working

I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)
So basically :
I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
I did npm install patch-package --save-dev
Then I ran npx patch-package vue-youtube
It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications
BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".
What am I missing here ? I feel like I have followed eveything in the patch-package npm page..
Thanks
EDIT : Still investigating.. few more informations/questions :
my patch name is patches/vue-youtube+1.4.0.patch
when i run npm ls vue-youtube it returns just one element : vue-youtube#1.4.0
in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?
EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube.
If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)
WORKING SOLUTION :
If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.
Adding below npm script in package.json after patching worked for me.
scripts: {
"prepare": "patch-package",
}
The lines from yarn documentation explains about prepare
For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.
After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.
I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...
To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:
$ npm install
$ npm run <name of the script that generates the dist folder>
No need to run npx patch-package nor postinstall step.
I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).
CAVEAT: You will have to run npm install and npm run every time you make an update to the package.
To test changes and be able to share it among team members (when the package is on Github)
Make a fork of the package you want to modify.
Make all the changes you want to your forked version of the package.
Run the following to automatically update the package.json file to make the dependency point to your forked version:
$ npm install <github's user name>/<package's name of the forked repository>#<branch name> --save-prod
For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:
$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod
Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.
Take a look at this answer, it may help.
https://stackoverflow.com/a/71153240/9981565
For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json

Move a module from devDependencies to dependencies in npm package.json

Is there any short command to move a module from devDependencies to dependencies in package.json?
I find myself always doing this:
npm uninstall <module_name> --save-dev
npm install <module_name> --save
Is there a shorter approach to this?
Shorthand to move from devDependencies to dependencies (prod):
npm i <module_name> -P
If you want to do the opposite (i.e. move a module from dependencies to devDependencies) just do:
npm install <module_name> --save-dev
or shorthand:
npm i <module_name> -D
Yes! to move a module from devDependencies to dependencies:
npm install <module_name> --save-prod
In yarn:
Move a module from devDependencies to dependencies:
yarn remove <module_name> --dev && yarn add <module_name>
Move a module from dependencies to devDependencies :
yarn remove <module_name> && yarn add <module_name> --dev
As said in the comments, the command actually deletes the module and reinstall it in the new place.
The problem with using npm or yarn commands is that there is a chance that the version that is re-added is a different version than the one that is currently used. If this is what you want - both a move and an upgrade - then go ahead and use the accepted answer.
If not, simply manually edit your package.json to move the line from the devDependencies object to the dependencies object (creating it if necessary). You can go the other direction too.
The lock file doesn't hold any information about if things are prod or dev dependencies, so that doesn't need to be updated. You can do a npm/yarn install afterwards to fix up any flags in the lock files.
The issue of using npm install is that you end up with updated versions. What worked for me is:
Moving them to the intended part (dev, or prod)
Removing them from node_modules folder
Execute npm install
That kept all versions intact.
If your project doesn't have a lockfile or a shrinkwrap file yet, you can simply move the corresponding line in your package.json.
(I'm not recommending not using lockfiles)
I was trying to find an answer for this question for people that uses Yarn, but it hasn't a command for this matter yet.
Although, I believe it is not essential anyway.
Physically (in the Node modules folder) there are no difference between a dependency listed for production and the ones listed for development in your package.json, they'll go to the same place (node_modules).
So, if you need to switch a dependency from devDependencies to dependecies you can go to your package.json and move manually with no need to run a new install or remove the dependency and then install it again with the dev flag.
For me, it's not so great at all to manage the package.json manually, but Yarn is not as advanced as NPM in all functionalities, thus that's a thing to consider.
For Yarn, I moved them manually inside package.json and then ran yarn install. Yarn lock file does not get updated, so I think this is fine.