How to avoid `loaded two copies of React` error when developing an external component?

Question

I am developing an external component (let\'s say my-component, which I link to the project with npm link (as it is in process and I need the packa

Answer 1

Adding the following in my webpack.config.js worked for me:

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

I also experimented with DedupePlugin (mentioned as a possible remedy here) but I couldn't get it to work.

What's also interesting is that I've encountered different (and perhaps more insidious) manifestations of the same problem when a module is found in multiple places in the dependency graph.

One such case was that my React.PropTypes.instanceOf(SomeType) constraints would emit warnings even though the type I passed in was correct. That was due to the module being present in multiple places in the node_modules directory tree. Due to duck-typing the code would still work, but my console was cluttered with these warnings. Going the resolve.alias way silenced those too.

YMMV

Answer 2

The issue is twofold:

1. You cannot have 2 copies of react loaded.
2. npm link creates a symlink, however the "require" doesnt respect the symlink and when it tries to navigate up the directory, it never finds the react of the parent project.

Solution:

All you have to do is link the react and react-dom in your component to that of parent project's node_modules folder.

Go to your component project and remove the react and react-dom then do

npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom

Answer 3

I was getting this because I had already included react and react-dom as external scripts in my HTML markup.

The error was caused by adding an import ReactDOM from 'react-dom' to a component module. The error went away once I removed the import, and the module worked fine since the components were already available.

Answer 4

Someone clevererer than I (@mojodna) came up with this solution: remove the duplicate dependencies from the external component, and resolve them with your project's copies of those deps.

Step 1: Remove the dependencies from your external component's node_modules

As @cleong noted, you can't just remove the deps from the external component's node_modules, because your project's build step will fail when it hits the now-missing dependencies in the external component.

Step 2: Add your project's node_modules to NODE_PATH

To fix this, you can append the project's node_modules to the NODE_PATH environment variable when running your build step. Something like e.g. this:

NODE_PATH=$(pwd)/node_modules/ npm start

(where npm start is your script that bundles your external component, via e.g. Browserify, Webpack, etc.)

In fact, you could always append that NODE_PATH addition to your build scripts, and it would work whether or not you've npm linked anything. (Makes me wonder if it shouldn't be default npm behavior...)

Note: I left my existing answer because there's some conversation there, and this is a different (and better) solution.

Answer 5

Fixed it by adding react-dom as an alias to my webpack config

alias: {

    react$: require.resolve(path.join(constants.NODE_MODULES_DIR, 'react')),
    'react-dom': require.resolve(path.join(constants.NODE_MODULES_DIR, 'react-dom'))

}

Answer 6

I am using ReactJS.net and setup webpack from the tutorial there and started using react-bootstrap aswell when i started getting this error. I found adding 'react-dom': 'ReactDOM' to the list of externals in webpack.config.js fixed the problem, the list of externals then looked like this:

  externals: {
    // Use external version of React (from CDN for client-side, or
    // bundled with ReactJS.NET for server-side)
      react: 'React',
      'react-dom': 'ReactDOM'

This seems to be the first stack overflow link on google for this error, so i thought this answer might help someone here.