Duplicate Packages Found: How to resolve React hoisting into web/

Get Help and Help Others
1

Why am I seeing react, react-dom, or core-js packages in my project’s web/node_modules?

It’s possible the version of React you are using in your project is “out of sync” with the version used by @redwood/web internally. Or that you do not have a resolution set for which version of React to use (this is required when other packages, like Storybook, require a different version of React than Redwood).

What can happen is one version of React (or the other packages listed above) is installed in your project’s ./node_modules while a different version of React is hoisted to ./web/node_modules. When this occurs, all kinds of weird things start breaking, like yarn redwood test or Prerender.

You can check by running yarn why react in your project. Look for output like this:

...
=> Found "react@17.0.1"
...

If you see multiple versions listed, you likely have a problem.

Once you know what’s going on, the fix is very simple!

How to Resolve

Step 1: Confirm package versions are correct

First off, you need to make sure you’re using the same version of React as Redwood. Check your project’s web/package.json to make sure you see this for your dependencies:

"dependencies": {
    ...
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
    ...

Note: at the time of this post, the current version is 17.0.1. You should check the current code to confirm the latest versions. See this file in the create-redwood-app template.

Step 2: Confirm package resolutions are correct

Because other dependencies, like Storybook, might be using a different version of React, we need to set a resolution in our root package.json. Check your project’s ./package.json to confirm you have the following:

   ...
  },
  "resolutions": {
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

Note: at the time of this post, the current version is 17.0.1 (without the ^). You should check the current code to confirm the latest versions. See this file in the create-redwood-app template.

Step 3: Remove the duplicate packages and reinstall

Run the following command to remove the hoisted packages in web/node_modules. (Don’t worry, if there are other packages that should be included, they’ll be reinstalled next.):

rm -rf web/node_modules

The above command works on Mac and Linux. If you’re on Windows, use the applicable command to remove the web/node_modules directory and its contents.

Then have Yarn run a forced installation, which will overwrite and replace modules as needed.

yarn install --force

Once Yarn installation has completed, you can double-check for any hoisted modules in web/ or run yarn why react again. The steps above should have resolved the issue. If not, let us know in the comments below.

2 Likes