symlink causing 2 versions of react

Question

I have a project with a bunch of sub custom npm modules being loaded in - we work in the submodules then publish them to a private npm repository and pull them into the main platform of the project for use. To speed up dev time, I have been symlinking a sub module's dist (transpiled for publish) folder into my main project for building. For other modules, this has been ok, however with a current module it seems to be loading 2 copies of react. Just to be clear, this is the error message:

bundle.js:29585 Uncaught (in promise) Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

what is confusing is doing a npm ls react shows me this:

  └── react@15.3.0

So it looks like there is only 1 version. Also, if i delete the symlink and just npm the module from the private repo (with the exact same code), it does not have this error. The main platform and this sub repo both have react as a dep, but i have done this method with other sub repos that have react as a dep and have had no issues before. I am using webpack to bundle as well, I don't know if this is part of the issue.

Has anyone run into anything like this? I am really not sure how to approach this, any advice would be greatly appreciated. Thanks!

Answer 1

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

Previously I have had success with resolving react and react-dom in the webpack configuration to avoid loading multiple copies.

resolve: {
  alias: {
    react: path.join('./node_modules', 'react'),
    'react-dom': path.join('./node_modules', 'react-dom')
  }
}