title: How to avoid React loading twice with Webpack when developing
body: <p>Given the following directory structure:</p>
  
  <pre><code>my-project
  |
  |-- node_modules
      |
      |-- react
      |-- module-x
          |
          |--node_modules
              |
              |--react
  </code></pre>
  
  <p>You can see both <strong>my-project</strong> and <strong>module-x</strong> require React.  I have the same problem as described on <a href="https://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean">this question</a>, 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 <strong>module-x</strong>, because Webpack will use React from <strong>my-project</strong>.  But if I'm in the process of developing <strong>module-x</strong> and the node_modules are installed, Webpack uses React from both <strong>my-project</strong> and <strong>module-x</strong>.</p>
  
  <p>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?</p>
  
  <p>I know I could keep <strong>module-x</strong> in a separate directory when developing, but it seems like I'd have to publish it and then install it in <strong>my-project</strong> to test it, and that's not very efficient.  I thought about <code>npm link</code>, but had no luck with it since it still has node_modules installed in <strong>module-x</strong>.</p>
  
  <p><a href="https://github.com/webpack/webpack/issues/105" rel="noreferrer">This here</a> sounds a lot like the same challenge I'm having, but it doesn't seem like <code>npm dedupe</code> or Webpack's dedupe option would work.  I'm probably not understanding some important detail.</p>