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
            |
          


        

Answer 1

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

Answer 2

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'),
  },
},