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:
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
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/[email protected]
├── @testing-library/[email protected]
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
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