A more descriptive createElement warning

docs/warnings/create-element-types.md

@@ -0,0 +1,87 @@
+---
+title: Invalid type for createElement
+layout: single
+permalink: warnings/create-element-types.html
+---
+
+You probably came to this page because of this error:
+
+```
+Warning: React.createElement: type should not be null, undefined, boolean, or number.
+It should be a string (for DOM elements) or a ReactClass (for composite components).
+```
+
+This usually occurs when attempting to render an element that is of an invalid type. The following examples will trigger this error:
+
+### Invalid types
+
+Ensure that your component is not of the following types: undefined, boolean, number or null.
+
+`Foo.js`
+
+```js
+let Foo;
+
+if (false) {
+  Foo = () => <div />;
+}
+
+export default Foo; // Foo is undefined
+```
+
+`App.js`
+
+```js
+import Foo from './Foo'
+
+class ReactApp extends Component {
+  render() {
+    return <Foo />;
+  }
+}
+```
+
+### Invalid member imports
+
+This happens when attempting to import a member as a default member, or importing a default member as a member.
+
+`Foo.js`
+
+```js
+export const Foo = () => { return <div /> }
+```
+
+`App.js`
+
+```js
+import Foo from './Foo' // wrong!
+// correct: import { Foo } from './Foo';
+
+class ReactApp extends Component {
+  render() {
+    return <Foo />;
+  }
+}
+```
+
+### Invalid or missing export
+
+Check that the component is exported properly with the keyword `export`.
+
+`Foo.js`
+
+```js
+const Foo = () => { return <div /> } // Foo needs to be exported
+```
+
+`App.js`
+
+```js
+import { Foo } from './Foo' // Foo is undefined
+
+class ReactApp extends Component {
+  render() {
+    return <Foo />;
+  }
+}
+```

src/isomorphic/classic/element/ReactElementValidator.js

@@ -192,7 +192,8 @@ var ReactElementValidator = {
       validType,
       'React.createElement: type should not be null, undefined, boolean, or ' +
         'number. It should be a string (for DOM elements) or a ReactClass ' +
-        '(for composite components).%s',
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html%s',
       getDeclarationErrorAddendum()
     );
 

src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js

@@ -297,24 +297,28 @@ describe('ReactElementValidator', function() {
     React.createElement(123);
     expect(console.error.calls.count()).toBe(4);
     expect(console.error.calls.argsFor(0)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components).'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html'
     );
     expect(console.error.calls.argsFor(1)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components).'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html'
     );
     expect(console.error.calls.argsFor(2)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components).'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html'
     );
     expect(console.error.calls.argsFor(3)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components).'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html'
     );
     React.createElement('div');
     expect(console.error.calls.count()).toBe(4);
@@ -336,10 +340,11 @@ describe('ReactElementValidator', function() {
     );
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components). Check the render method of ' +
-      '`ParentComp`.'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html ' +
+        'Check the render method of `ParentComp`.'
     );
   });
 
@@ -537,9 +542,10 @@ describe('ReactElementValidator', function() {
     void <Foo>{[<div />]}</Foo>;
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toBe(
-      'Warning: React.createElement: type should not be null, undefined, ' +
-      'boolean, or number. It should be a string (for DOM elements) or a ' +
-      'ReactClass (for composite components).'
+      'Warning: React.createElement: type should not be null, undefined, boolean, or ' +
+        'number. It should be a string (for DOM elements) or a ReactClass ' +
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html'
     );
   });