How Prevent Multiple Copies Of React from Loading?

Question

In my previous Meteor app, using browserify, and React, all was working until I switched to meteor webpack.

I use react-select in my Meteor apps and it worked great

Answer 1

In my case, I was building a separate npm module, then including that as a library in another project locally using npm link ../some-library. One of the modules within that library caused this error when I ran the parent project.

When I ran into this error, the solution for me was to prevent react and react-dom from being including in the some-library bundle output, by adding the following to the module.exports of its webpack.config.js:

externals: {
    react: 'react',
    'react-dom': 'react-dom'
}

Answer 2

Something that worked for me was:

Uninstall all globally installed packages related to react (create-react-app, react-native, react and so on)

then: rm -rf node_modules

then: use npm install instead of yarn install

considering an App created with crate-react-app and ejected

Answer 3

If You use web pack then you can fix it by adding the following to Webpack config for Don't bundle react or react-dom

externals: { 'react': 'React', 'react-dom': 'ReactDOM' }

Answer 4

Since you use webpack, you can add an alias for loading react, like this:

// In webpack.config.js

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

This prevented the addComponentAsRefTo(...) error and made our build succeed again. However, for some reason, the testing build failed only on our CI environment as it could not resolve the node_modules/react path. I think it's unlikely that you will encounter this particular problem, though.