Detect duplicate React and show a different message

[gaearon]

It would be cool if, in addition to DEV mode detection, we could detect when there are two instances of ReactDOM on the page.

This issue mentions how we could detect it: #692.

One thing to keep in mind is it's valid to have two different renderers (e.g. ReactDOM + ReactART), but not two instances of one renderer. Not sure if there's an easy way to tell those cases apart, but we can make changes to React if necessary to support that.

[chisler]

I'd be happy to try to add that detection!

[gaearon]

👍

[chisler]

Hi! This is my first open source contribution. I log current status of the issue.

1. Detecting several renderers is simple.
2. Guessing renderer type by the object is not, at least for now.

However, I found only 1 custom renderer that explicitly fires .inject => may interfere dumb checking hook._renderers.length > 1.

Duplicate React among A-C sites-using-react, found with extension

• https://www.astenonline.com/
• http://www.arte.tv/en/
• https://www.conciergeauctions.com/
• https://clashofclans.com/

Renderes I’ve studied

I've studied popular renderers (from list1 & list2) on the matter of self-injection.

Renderers that inject themselves correctly:

• react-dom
• react-three-renderer

These do not inject themselves:

• react-art
• react-canvas
• react-three
• aframe-react
• react-blessed
• react-dom-stream
• react-titanium
• react-pdf
• konsul
• mylittledom
  …

These ones fire injection but are not hooked in browser:

• react-hardware
• react-vr

P.S. I don’t see the generic solution without modifying react-dom injection yet. Modification of current react-dom version will not provide backward compatibility, so we won't be able to detect latest ReactDOM + old one, only two new ones. This is not a case yet. I hope it's ok to think about it for a few more days.

[ngyikp]

Additional problem: It's impossible to tell whether a duplicated React is a mistake by the site developer or they are using some third-party libraries that also uses React. (react/react#10768)

Example: https://www.kenhub.com/en/atlas/acromion (third-party library: https://djtflbt20bdde.cloudfront.net )

Perhaps in future version that can show a table of React renderers on the page and the minification status for each?

[chisler]

Hi! Thank you for the comment.

I pointed that out in code: // Currently we overwrite buildType with each injected renderer's type.

The issue with overwriting is applicable to any renderer inspection: it only depends on the order they inject. The table will allow to report unminified and duplicated React as well.

I wanted to suggest the table too, though I felt like it's a next step, because it's a change in the way we report, not duplication problem.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools