Merge pull request facebook#1531 from spicyj/two-face

chenglou · chenglou · commit e10d10e31e0a · 2014-07-03T14:45:23.000-07:00
Give useful error when using two copies of React
diff --git a/src/browser/ui/ReactMount.js b/src/browser/ui/ReactMount.js
@@ -19,8 +19,9 @@
 "use strict";
 
 var DOMProperty = require('DOMProperty');
-var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
+var ReactCurrentOwner = require('ReactCurrentOwner');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactInstanceHandles = require('ReactInstanceHandles');
 var ReactPerf = require('ReactPerf');
 
@@ -335,6 +336,21 @@ var ReactMount = {
    * @return {ReactComponent} Component instance rendered in `container`.
    */
   renderComponent: function(nextDescriptor, container, callback) {
+    invariant(
+      ReactDescriptor.isValidDescriptor(nextDescriptor),
+      'renderComponent(): Invalid component descriptor.%s',
+      (
+        ReactDescriptor.isValidFactory(nextDescriptor) ?
+          ' Instead of passing a component class, make sure to instantiate ' +
+          'it first by calling it with props.' :
+        // Check if it quacks like a descriptor
+        typeof nextDescriptor.props !== "undefined" ?
+          ' This may be caused by unintentionally loading two independent ' +
+          'copies of React.' :
+          ''
+      )
+    );
+
     var prevComponent = instancesByReactRootID[getReactRootID(container)];
 
     if (prevComponent) {
diff --git a/src/browser/ui/__tests__/ReactMount-test.js b/src/browser/ui/__tests__/ReactMount-test.js
@@ -24,6 +24,7 @@ var mocks = require('mocks');
 describe('ReactMount', function() {
   var React = require('React');
   var ReactMount = require('ReactMount');
+  var ReactTestUtils = require('ReactTestUtils');
 
   describe('constructAndRenderComponentByID', function() {
     it('throws if given an id for a component that doesn\'t exist', function() {
@@ -37,6 +38,29 @@ describe('ReactMount', function() {
     });
   });
 
+  it('throws when given a factory', function() {
+    expect(function() {
+      ReactTestUtils.renderIntoDocument(React.DOM.div);
+    }).toThrow(
+      'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
+      'Instead of passing a component class, make sure to instantiate it ' +
+      'first by calling it with props.'
+    );
+
+    var Component = React.createClass({
+      render: function() {
+        return <div />;
+      }
+    });
+    expect(function() {
+      ReactTestUtils.renderIntoDocument(Component);
+    }).toThrow(
+      'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
+      'Instead of passing a component class, make sure to instantiate it ' +
+      'first by calling it with props.'
+    );
+  });
+
   it('should render different components in same root', function() {
     var container = document.createElement('container');
     document.documentElement.appendChild(container);
diff --git a/src/core/__tests__/ReactPropTypes-test.js b/src/core/__tests__/ReactPropTypes-test.js
