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