Upgrading a monorepo to React 18

Question

I am trying to upgrade my monorepo to React 18, project by project. The directory structure is:

/root/
/root/packages/...
/root/oldProjects...
/root/newProject

I have updated newProject's package.json react (+dom) in dependencies and @types/react (+dom) in devDependencies versions to 18, and put a resolution in root's package.json for @types/react: "^17".

It appears to work okay until I use some React 18 features, e.g. useTransition, at which point I am receiving a type error (useTransition not found in react).

I am confused, because I thought resolutions would be overriden by devDependencies in the newProject.

Any idea why it happens and also what is a better way to do it.

Answer 1

devDependencies are libs that your project requires to run.

resolutions sets a specific version of a package that should be used, even if it's not being used at all.

In your root package.json, you have a resolution for @types/react set to ^17. This means that regardless of what individual projects specify, the TypeScript compiler will use version 17 of the type definitions. Since useTransition is a feature introduced in React 18, TypeScript doesn't recognize it as it's working with type definitions for an older version.

Typically, resolutions can lead to issues when different projects within the monorepo need different versions of the same package, as is your case.

So you can either remove the resolution for @types/react from the root package.json and manage it individually in each project's package.json

OR

Use a more specific resolution for newProject. For example, you can try adding a resolutions field in the newProject's package.json that explicitly states the version 18 for @types/react.