Merge pull request #3580 from robertknight/2402-warn-multiple-copies-…

…of-react-on-same-page

Warn when multiple instances of React are loaded on the same page

grunt/tasks/version-check.js

@@ -6,7 +6,7 @@ var grunt = require('grunt');
 // Check that the version we're exporting is the same one we expect in the
 // package. This is not an ideal way to do this, but makes sure that we keep
 // them in sync.
-var reactVersionExp = /\bReact\.version\s*=\s*['"]([^'"]+)['"];/;
+var reactVersionExp = /\bREACT_VERSION\s*=\s*['"]([^'"]+)['"];/;
 
 module.exports = function() {
   var reactVersion = reactVersionExp.exec(

src/browser/ui/React.js

@@ -13,6 +13,30 @@
 
 'use strict';
 
+var REACT_VERSION = '0.14.0-alpha';
+
+var ExecutionEnvironment = require('ExecutionEnvironment');
+var warning = require('warning');
+
+if (__DEV__) {
+  // before performing any initialization of React, check that
+  // only one instance is in use on the current page.
+  //
+  // Using multiple instances cause a variety of problems if elements
+  // from different versions are mixed on the same page.
+  //
+  // See issue #2402
+  if (ExecutionEnvironment.canUseDOM) {
+    warning(
+      typeof window.__REACT_VERSION__ === 'undefined',
+      'Multiple instances of React have been initialized on the same page. ' +
+      'Currently initializing React v' + REACT_VERSION + ' but another instance of React v' +
+      window.__REACT_VERSION__ + ' was already initialized'
+    );
+    window.__REACT_VERSION__ = REACT_VERSION;
+  }
+}
+
 var ReactChildren = require('ReactChildren');
 var ReactComponent = require('ReactComponent');
 var ReactClass = require('ReactClass');
@@ -33,7 +57,6 @@ var ReactServerRendering = require('ReactServerRendering');
 var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
 var onlyChild = require('onlyChild');
-var warning = require('warning');
 
 ReactDefaultInjection.inject();
 
@@ -50,6 +73,7 @@ if (__DEV__) {
 var render = ReactPerf.measure('React', 'render', ReactMount.render);
 
 var React = {
+  version: REACT_VERSION,
   Children: {
     map: ReactChildren.map,
     forEach: ReactChildren.forEach,
@@ -96,7 +120,6 @@ if (
 }
 
 if (__DEV__) {
-  var ExecutionEnvironment = require('ExecutionEnvironment');
   if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
 
     // If we're in Chrome, look for the devtools marker and provide a download
@@ -152,6 +175,4 @@ if (__DEV__) {
   }
 }
 
-React.version = '0.14.0-alpha';
-
 module.exports = React;