When and how can we upgrade the dependencies that create-react-app adds to package.json?
Today I ran npx create-react-app my-app --template typescript and it added these dependencies:
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "~3.7.2"
}
Even though some have newer versions available:
"#testing-library/jest-dom": "^5.11.4"
"#testing-library/react": "^11.0.4"
"#testing-library/user-event": "^12.1.6"
"typescript": "~4.0.3"
Can we upgrade any dependency at any time or are they tied to the specific version of react-scripts? If it is the latter how do we know when to upgrade and what version to upgrade to?
When?
I'm still figuring that out, but maybe when a dependency (e.g. #testing-library/user-event) strongly recommends updating.
and how
Here is a walkthrough of how to update dependencies. Your mileage may vary. I recommend testing each change before moving to the next. Some dependencies may need to go together.
I recently (2022) ran npx create-react-app my-app --template typescript and analyzing the dependencies with npm outdated for me shows:
Package Current Wanted Latest
#testing-library/user-event 13.5.0 13.5.0 14.4.3
#types/jest 28.1.8 28.1.8 29.1.2
#types/node 18.7.14 18.8.3 18.8.3
web-vitals 2.1.4 2.1.4 3.0.3
Major version upgrades:
You can see that #testing-library/user-event does not "want" a higher version, but a higher MAJOR version does exist.
In order to upgrade major versions, which in theory does not happen as frequently as minor versions, I use a brute force method which involves npm uninstall <package-name> and then npm install <package-name>.
For package #testing-library/user-event,
# show the version installed
npm list | grep '#testing-library/user-event'
npm uninstall -D #testing-library/user-event
npm list | grep '#testing-library/user-event'
npm uninstall -D #testing-library/user-event
npm list | grep '#testing-library/user-event'
The following is printed for the above commands
├── #testing-library/user-event#13.5.0
├── #testing-library/user-event#14.4.3
Executing npm outdated again shows #testing-library/user-event is omitted. Success!
Package Current Wanted Latest
#types/jest 28.1.8 28.1.8 29.1.2
#types/node 18.7.14 18.8.3 18.8.3
web-vitals 2.1.4 2.1.4 3.0.3
Minor version upgrades:
Updating a package to a higher minor version can be accomplished using npm update.
You can see that #types/node has a higher MINOR version available that npm outdated marks as Wanted. You can upgrade any single package wanting a MINOR upgrade by saying npm update <package-name>, or ALL packages wanting a minor upgrade by omitting the package name, e.g. npm update
For upgrading only package #types/node,
npm update #types/node
npm outdated
Running the commands above show #types/node is no longer "Wanted" to upgrade, visible in the following output. Success!
Package Current Wanted Latest
#types/jest 28.1.8 28.1.8 29.1.2
web-vitals 2.1.4 2.1.4 3.0.3
Related
In my React Native project I have the following packages:
"redux": "^4.0.5",
"redux-persist": "^4.10.2",
"redux-persist-filesystem-storage": "^2.2.0",
I want to upgrade redux-persist to the latest version (6.0.0), so I ran npm i redux-persist, but the version in my package.json stayed the same.
Why would this be? Is it because of the versions of the other packages?
You can try specifying the version you want to install, like npm install redux-persist#<version>
I am trying to create an npm package. Trying to install Lodash with major and minor version dependencies. It should be like minor version 17 and major version 4.
How is it possible?
I have tried
npm install lodash#^4 && ~17 but it seems not what I am expecting. It should me clearly mentioned in package.json as major and minor version dependencies right?
Thanks in advance.
npm install lodash#4.17 will install lodash#4.17.x and update package.json appropriately to require 4.17.x. The entry in package.json could have the format "lodash": "4.17" or something more like "lodash": "^4.17.21", depending on what version of npm you are running.
I have created my own npm feed in Azure Artifacts. I can publish my package and use it in my applications.
In my applications, the package is referenced like this in the package.json
`"#op/breeze-helpers": "^0.1.5"`
If I now publish version 0.1.6 of my package, delete my package from node_modules and run npm i , npm installs version 0.1.5 again !
I even tried npm i --cache c:/tmp/empty-cache to make sure it was not getting the package from cache, but it ends up the same. npm keeps installing version 0.1.5
what am doing wrong, I thought with the caret, the next minor should be downloaded when running npm i ?
The package-lock.json sets your currently installed version of each package in stone, and npm will use those exact versions when running npm install.
So it will download the package versions from the package-lock.json file.
I want to be on latest version always.
You could try to set the "*" as the dependency package version.
For example:
"dependencies": {
"#types/bootstrap": "*",
"#types/jquery": "*",
"bootstrap": "*"
}
Then it will always download the latest version of the target packages.
I'm building a boilerplate for my every frontend projects and if I wanted when I run npm install so all my dependencies will be the latest version, Would I change all the packages' distag to "latest" for that purpose?
"#babel/plugin-syntax-dynamic-import": "latest",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"babel-eslint": "^10.0.1"
to
"#babel/plugin-syntax-dynamic-import": "latest",
"#babel/plugin-transform-runtime": "latest",
"#babel/preset-env": "latest",
"babel-eslint": "latest"
The package-lock.json
npm v5.2+ comes with a package-lock.json file that is generated when you install packages. This file should be versioned because it contains the information of every package installed.
The idea then becomes that instead of using package.json to resolve and install modules, npm will use the package-lock.json. Because the package-lock specifies a version, location and integrity hash for every module and each of its dependencies, the install it creates will be the same, every single time. It won’t matter what device you are on, or when in the future you install, it should give you the same result every time, which is very useful.
So, if package-lock.json locks down the version of installed packages, what is the problem using "latest"?
The problem lies in that your package.json is not meaningful.
Your package.json does not tell you what version is actually installed, not even a clue.
What if someone overrides the package-lock.json or deletes it.
It is not the end of the world, but having a package.json should give us a clue about the packages we have installed.
Of course you can see a list of your installed packages with versions: npm list --depth=0 and also if you want to update packages, you can see the list of outdated ones: npm outdated
Check out this article: Everything you wanted to know about package-lock.json but were too afraid to ask.
I think it is ok when you use lastest tag as there is no conflict in version of packages.
In the user's guide of distag, they show that:
By default, the latest tag is used by npm to identify the current version of a package, and npm install <pkg> (without any #<version> or #<tag> specifier) installs the latest tag. Typically, projects only use the latest tag for stable release versions, and use other tags for unstable versions such as prereleases.
So if you are gonna to release a stable version, use latest tag will definitely true.
When I $ npm install eslint --savedev, it produces this entry in my package.json file:
"devDependencies": {
"eslint": "^3.9.1"
}
Notice the caret before the version number. When I install a package I've published in the same way $ npm install #jsejcksn/eslint-config --savedev, it does not add the caret:
"devDependencies": {
"#jsejcksn/eslint-config": "0.0.5",
"eslint": "^3.9.1"
}
What do I need to do in order to get npm to save my package with the caret so it will allow major version updates of my package?
From https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004:
Allows changes that do not modify the left-most non-zero digit in the [major, minor, patch] tuple. In other words, this allows patch and minor updates for versions 1.0.0 and above, patch updates for versions 0.X >=0.1.0, and no updates for versions 0.0.X.
I incremented the version to 1.0.0 and it worked as expected.