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

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