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

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?

Related

Is there a way to install an npm package locally but not affect package.json or package-lock.json?

I have a project that I'm working on for a client where I have two private packages (which I can't get access to npm install) are inside the package.json.
I do however have access to clone the repos for those said packages. If I simply run an npm install I'll get a permission denied error. Same if I run npm link to the packages.
I've been working around this by removing the packages from the package.json then running npm install ../some-package. This works but isn't a great solution because if I wanted to add a new package I'd have to deal with a bit of a mess with the package.json.
Is there a better way than this?
I have tried running npm link ../some-package but I still get access denied. The only way I've managed to complete an install is by removing the packages then installing them from a local dir.
I don't know the details of your situation, but I see at least two potential solutions to explore.
Option 1: Install the package from the repo
I do however have access to clone the repos for those said packages.
You can install from a git repo and package.json will record that git repo as the source of the package rather than the npm registry.
From the docs at https://docs.npmjs.com/cli/v8/commands/npm-install:
npm install :
Installs the package from the hosted git provider, cloning it with git. For a full git remote url, only that URL will be attempted.
Option 2: Install from the local file system with --no-save
If that approach doesn't work for you, you can try npm install --no-save ../some-package as a build step. The --no-save makes it so it doesn't modify package.json.

What is the meaning of package name before #git in package-lock.json

When I try to run npm install, I got an error:
Could not install from "node_modules/eth-sig-util/ethereumjs-abi#git+https:/github.com/ethereumjs/ethereumjs-abi.git" as it does not contain a package.json file.
So I went to check the diff for package-lock.json, and noticed npm somehow modified
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
into
"ethereumjs-abi": "ethereumjs-abi#git+https://github.com/ethereumjs/ethereumjs-abi.git",
which breaks the npm install, so I'm wondering what is the meaning of placing package name before #git and why it breaks the install process.
It works after I delete the ethereumjs-abi# prefix, but it shows up after I run npm install and breaks again...
Thanks in advance!
A #git use to install the package from the git repo.
like: you fork package git repo into your Git account and you change some part of the package now you want to that install that changed package in project you can use #git+'git repo URL of your changed repo'.
here ethereumjs-abi package install from the https://github.com/ethereumjs/ethereumjs-abi.git" git repo:
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git",

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

What is the correct use of package.lock.json file, when exactly it works

What is the exact use of package.lock.json file? I have read about it but it's confusing.
Let's say I do npm install so that it will create a package.lock.json file, and the next time when I do npm install, will it retain installation of the same packages as it was mentioned in the package.lock.json file?
Let's say I have a package version defined as "^1.0.0" in my package.json file and a new version becomes available in the npm registry. Will it update the package when I do npm install, or will it keep the same as what was there in the package.json?
Is there any easy way to update the package.json file with the exact no of package version without manually updating it one by one? I want to keep maintain the version of the package the same so that next time anybody does npm install, they should get exactly the same package. It's need for a release branch
Actually I need what was the original definition of package.lock.json file but I found inconsistency in its behavior.
I tried using NPM CI but it fails with error node_gyp needs python https://github.com/nodejs/node-gyp/issues/1977
What is the exact use of package.lock.json file?
Ans: The file is used to describe the exact tree that was generated initially, that is the version of the dependency that was used initially to install (NOTE: It will always be modified if package.json or node_modules are modified by npm)
source: https://docs.npmjs.com/configuring-npm/package-lock-json.html
Now coming to your specific questions :
Let's say I do npm install so that it will create a package.lock.json file, and the next time when I do npm install, will it retain installation of the same packages as it was mentioned in the package.lock.json file?
The simple answer here is: Yes
When you do npm install initially, you specify the package name. npm will create node_modules folder and package-lock.json file and the entry of the package with the version that was used to install will be added. next time when you do npm install, without specifying the package it will not update any of your package even with the caret (^) symbol because this time npm will look at the package-lock.json file (as it is present there) and it will install the same version that is specified in the (package-lock.json) file.
Let's say I have a package version defined as "^1.0.0" in my package.json file and a new version becomes available in the npm registry. Will it update the package when I do npm install, or will it keep the same as what was there in the package.json?
As explained in first question, it will not, if the package-lock.json is present in the directory. Updating of the package will only happen if package-lock.json file and node_modules folder are not present in the directory.
Is there any easy way to update the package.json file with the exact no of package version without manually updating it one by one? I want to keep maintain the version of the package the same so that next time anybody does npm install, they should get exactly the same package. It's need for a release branch
It is a good practice to use npm ci, but you can also use npm update, this will update the dependencies to its latest minor version, and your package.json as well as package-lock.json file will also be updated
For the production, its preferred way to use the same version of dependencies that was used initially. In this case it is better to have package-lock.json file, so in case of dockerizing application when you do npm install it will install the dependencies with versions that are used in package-lock.json

react-native: switch from yarn to npm

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.