Warn when two versions of React are used alongside

[gaearon]

People lose hours of work debugging a simple issue: two versions of React being loaded at the same time.

https://github.com/gaearon/react-hot-loader/issues/32#issuecomment-60043061 https://github.com/KyleAMathews/coffee-react-quickstart/issues/10#issuecomment-50655116 https://github.com/gaearon/react-document-title/issues/1#issuecomment-60241045 https://github.com/clayallsopp/react.backbone/issues/26

Because there is no warning right away when this happens, they usually discover the problem through invariant violations. Some of them are descriptive (e.g. Uncaught Error: Invariant Violation: The handler for Route "hello" must be a valid React component) and I think I even saw warning that said something like "check if two copies of React are loaded", but some are really cryptic: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs....

Is there a reason why we don't want to warn right away when two copies of React are loaded?

[idhard]

if both are on a recent version of

Could you please point me out what would be the behavior of React if , let say , we want to introduce a widget including React in a host page that has an older version of it and the possible workaround to make it work? Thanks

[sophiebits]

Old versions of React are probably only tripped up by data-reactid IDs in the DOM that it didn't generate. If you're doing only client-side rendering with your widget, it should only have a data-reactroot attribute and no data-reactid so there shouldn't be any conflict.

[jedwards1211]

Just ran into problems again today when I accidentally had 16.4.2 and 16.5.0 installed in a project, no warning from React.

To make matters worse, the duplicate versions were caused by a bug in yarn upgrade that has been open for over a year...

[OliverRadini]

Was there any resolution as to whether or not this is possible and/or a good idea? It seems like it'd provide developers with useful information.

[prasanthLalapeta]

Project A uses React 16 wherein Project B uses React 15, Lets say Project A is package got used in Project B - can that work?

[dgreene1]

Would Preact and React have the same issue described here?

I’m asking because I’m using single-spa for a platform play at a large company of distributed teams.

[robertknight]

Would Preact and React have the same issue described here?

It sounds to me like there are two separate issues here:

1. Can you have two different copies of the library loaded and in use anywhere on a page in separate components that don't interact with each other?
2. Can you have components from two different bundles, each with their own copy of the library, interact with each other (eg. the render function from one library receiving an element created with createElement from the other library)

I don't know about the status with modern versions of React. In the case of Preact (1) should be fine but since it does have some global state you could run into problems in situation (2). Please file an issue in the Preact repository if you'd like to discuss further.

[dkeesey]

I think that in the future, this will actually just work. In the meantime we can warn here: https://github.com/facebook/react/blob/master/src/core/ReactElement.js#L230

This appears to be a bad link.

[IPWright83]

For someone encountering this at the moment - does anyone have any tips on identifying the cause and debugging the issue? I've used the check from the hooks page (how I discovered this) which confirms I've got 2 instances loaded:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

I believe I'm doing things by the book, in a monorepo react, react-dom etc are all always peerDependencies. What steps would you recommend after this?