CODEWITHSUNDEEP
create-react-app
Mike Vosseller
Mike Vosseller

Reputation: 4197

How to upgrade dependencies added by create-react-app

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?

Upvotes: 4

Views: 949

Answers (1)

cyrf
cyrf

Reputation: 6013

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/[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

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

Upvotes: 2

Related Questions