Detect duplicated React

backend/installGlobalHook.js

@@ -141,14 +141,69 @@ function installGlobalHook(window: Object) {
     }
     return 'production';
   }
+  function detectRendererName(renderer) {
+    if (renderer.rendererPackageName) {
+      return renderer.rendererPackageName;
+    }
+    // Try to detect old versions without id injected
+    try {
+      var toString = Function.prototype.toString;
+      if (typeof renderer.version === 'string') {
+        // React DOM Fiber (16+)
+        return 'react-dom';
+      }
+      if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
+        // React DOM Stack like renderer
+        var renderRootCode = toString.call(
+          renderer.Mount._renderNewRootComponent
+        );
+
+        // React DOM 15.*
+        if (
+          renderRootCode.indexOf('ensureScrollValueMonitoring') !== -1 &&
+          renderRootCode.indexOf('37') !== -1
+        ) {
+          return 'react-dom';
+        }
+        // React DOM Stack 0.13.*/0.14.*
+        if (renderRootCode.indexOf('_registerComponent') !== -1) {
+          return 'react-dom';
+        }
+        // Something we're not aware of => not ReactDOM
+        return 'unknown';
+      }
+    } catch (err) {
+      // TODO: Mirrors error handling of detectReactBuildType()
+    }
+    return 'unknown';
+  }
+  function detectDuplicatedRenderers(renderers) {
+    //  Detect if we have more than one ReactDOM instance
+    var renderersMap = {};
+
+    Object.keys(renderers).forEach(id => {
+      const name = detectRendererName(renderers[id]);
+
+      if (name !== 'unknown') {
+        renderersMap[name] = renderersMap[name] ? renderersMap[name] + 1 : 1;
+      }
+    });
+    return Object.keys(renderersMap).map(key => renderersMap[key]).some(rendererCount => rendererCount > 1);
+  }
   const hook = ({
     // Shared between Stack and Fiber:
     _renderers: {},
     helpers: {},
     inject: function(renderer) {
       var id = Math.random().toString(16).slice(2);
       hook._renderers[id] = renderer;
-      var reactBuildType = detectReactBuildType(renderer);
+      var isReactDuplicated = detectDuplicatedRenderers(hook._renderers);
+
+      // Currently we overwrite buildType with each injected renderer's type
+      var reactBuildType = isReactDuplicated
+        ? 'duplicated'
+        : detectReactBuildType(renderer);
+
       hook.emit('renderer', {id, renderer, reactBuildType});
       return id;
     },

shells/webextension/popups/duplicated.html

@@ -0,0 +1,21 @@
+<script src="shared.js"></script>
+<style>
+    html, body {
+        font-size: 14px;
+        min-width: 430px;
+        min-height: 101px;
+    }
+</style>
+<p>
+    <b>This page is using multiple copies of React. &#x1f6a7;</b>
+</p>
+<p>
+    Note that using several copies of React may cause problems.
+    <br />
+    <br />
+    You can find the troubleshooting instructions in <a href="https://fb.me/react-refs-must-have-owner#multiple-copies-of-react">React Blog</a>.
+</p>
+<hr />
+<p>
+    Open the developer tools, and the React tab will appear to the right.
+</p>