How to avoid React loading twice with Webpack when developing

Question

Given the following directory structure:

my-project
|
|-- node_modules
    |
    |-- react
    |-- module-x
        |
        |--node_modules
            |
            |--react

You can see both my-project and module-x require React. I have the same problem as described on this question, but the suggestion is to remove react from the package.json dependencies. I do that and it works fine, as long as no node_modules are installed in module-x, because Webpack will use React from my-project. But if I'm in the process of developing module-x and the node_modules are installed, Webpack uses React from both my-project and module-x.

Is there a way I could have Webpack make sure only one instance of React is used, even though it's required on two separate levels?

I know I could keep module-x in a separate directory when developing, but it seems like I'd have to publish it and then install it in my-project to test it, and that's not very efficient. I thought about npm link, but had no luck with it since it still has node_modules installed in module-x.

This here sounds a lot like the same challenge I'm having, but it doesn't seem like npm dedupe or Webpack's dedupe option would work. I'm probably not understanding some important detail.

score 103 · Accepted Answer · answered Jul 01 '15 at 20:12

103

This issue usually arises when using npm link. A linked module will resolve its dependencies in its own module tree, which is different from the one of the module that required it. As such, the npm link command installs peerDependencies as well as dependencies.

You can use resolve.alias to force require('react') to resolve to your local version of React.

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},

answered Jul 01 '15 at 20:12

Alexandre Kirszenberg

35,938
10
88
72

I've spend half a day on this issue. Unfortunately, neither the error message in the browser nor the Webpack docs are very helpful. You have saved my day! Thanks!! – Ed_ Jun 19 '16 at 12:16
3

This solution still causes webpack to assign different IDs to react that is referenced from an app and react that is referenced from a linked module. So multiple instances of react module created by webpack. – viskin Nov 05 '16 at 19:07
Saved me. Here are the docs: https://webpack.github.io/docs/configuration.html#resolve-alias – Mario Tacke Nov 22 '16 at 19:34

score 60 · Answer 2 · answered Aug 07 '16 at 20:42

60

If you don’t want to (or can’t) modify the project configuration, there is a more straightforward solution: just npm link React itself back to your project:

# link the component
cd my-app
npm link ../my-react-component

# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react

answered Aug 07 '16 at 20:42

Dan Abramov

264,556
84
409
511

1

This can get messy. Libraries are one-to-many (one library installed in many apps), but this associates a library with only one app by linking that app's react folder to the library. So working with two apps at once isn't possible (like the library's example page and also the consumer app). – Matthias Jul 29 '19 at 17:27
@MatthiasDailey any idea how to solve it if we have more projects? – alek kowalczyk Sep 04 '19 at 10:08
2

@alek I've found yalc useful, and yarn workspaces if another solution if you use yarn. – Matthias Sep 04 '19 at 12:28
1

This answer saved my day with a CRA (Create React App). The answer could be more easy to understand by adding resulting links with absolute paths. – Möhre Feb 21 '20 at 18:37
If you use `yarn`: `# link the component cd my-app/node_modules/react yarn link # link its copy of React back to the app's React cd ../../../my-react-component yarn link react` – eloone Mar 16 '20 at 14:38
Is this solution still valid if both libraries are using different versions of react? – Batman Apr 17 '20 at 08:34
@dan I have a shared component library that's used with two Create React App apps. Which should I link it to? – Jon Rimmer Jun 25 '20 at 09:42
This is the recommended solution: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react – tim-phillips Mar 03 '22 at 18:03

score 0 · Answer 3 · answered Jun 22 '21 at 19:05

Just in case it's useful for others, the solutions suggested above didn't work for me, I had to perform the following steps to solve it:

In the library:

Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:

"peerDependencies": {
  "react": "^16.8.6",
  ...
}

run npm install
build the library (in my case, with a rollup -c npm script

In my main app:

change the version of my library to point to my local project with a relative path in package.json, e.g.

"dependencies": {
  "my-library": "file:../../libraries/my-library",
  ...
}

Add resolve.symlinks = false to my main app's webpack configuration
Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:

"scripts": {
  "build": "set WEBPACK_CONFIG_FILE=all&& webpack",
  "start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}

run npm install
run npm run start

score 0 · Answer 4 · answered Mar 16 '22 at 05:25

In the same vein as the accepted answer here's how you can achieve the desired outcome with Craco:

const path = require('path')

module.exports = {
  webpack: {
    configure: config => {
      config = {
        ...config,
        resolve: {
          ...config.resolve,
          alias: {
            ...config.resolve.alias,
            'react': path.resolve('./node_modules/react'),
          },
        },
      }
      // console.log(config)
      return config
    },
  },
}

It's important to note you can't just pass resolve as a key, you have to do your own deep merge using the configure callback.

How to avoid React loading twice with Webpack when developing

4 Answers4

Linked