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

Give useful error when using two copies of React

Author: chenglou

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) {

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);