Improve error message thrown in Fiber with multiple copies of React

docs/warnings/refs-must-have-owner.md

@@ -4,8 +4,14 @@ layout: single
 permalink: warnings/refs-must-have-owner.html
 ---
 
-You are probably here because you got the following error messages:
+You are probably here because you got one of the following error messages:
 
+*React 16.0.0+*
+> Warning:
+>
+> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
+
+*earlier versions of React*
 > Warning:
 >
 > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.

scripts/fiber/tests-passing.txt

@@ -597,6 +597,9 @@ src/renderers/__tests__/ReactUpdates-test.js
 * does not re-render if state update is null
 * synchronously renders hidden subtrees
 
+src/renderers/__tests__/multiple-copies-of-react-test.js
+* throws the "Refs must have owner" warning
+
 src/renderers/__tests__/refs-destruction-test.js
 * should remove refs when destroying the parent
 * should remove refs when destroying the child

src/renderers/__tests__/multiple-copies-of-react-test.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React = require('react');
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+var ReactTestUtils = require('react-dom/test-utils');
+
+class TextWithStringRef extends React.Component {
+  render() {
+    jest.resetModules();
+    React = require('react');
+    return (
+      <span ref="foo">
+        Hello world!
+      </span>
+    );
+  }
+}
+
+describe('when different React version is used with string ref', () => {
+  it('throws the "Refs must have owner" warning', () => {
+    if (ReactDOMFeatureFlags.useFiber) {
+      expect(() => {
+        ReactTestUtils.renderIntoDocument(<TextWithStringRef />);
+      }).toThrow(
+        'Element ref was specified as a string (foo) but no owner was set.' +
+          ' You may have multiple copies of React loaded. (details: ' +
+          'https://fb.me/react-refs-must-have-owner).',
+      );
+    } else {
+      expect(() => {
+        ReactTestUtils.renderIntoDocument(<TextWithStringRef />);
+      }).toThrow(
+        'Only a ReactOwner can have refs. You might be adding a ref to a ' +
+          "component that was not created inside a component's `render` " +
+          'method, or you have multiple copies of React loaded ' +
+          '(details: https://fb.me/react-refs-must-have-owner)',
+      );
+    }
+  });
+});

src/renderers/shared/fiber/ReactChildFiber.js

@@ -162,6 +162,18 @@ function coerceRef(current: Fiber | null, element: ReactElement) {
       };
       ref._stringRef = stringRef;
       return ref;
+    } else {
+      invariant(
+        typeof mixedRef === 'string',
+        'Expected ref to be a function or a string.',
+      );
+      invariant(
+        element._owner,
+        'Element ref was specified as a string (%s) but no owner was ' +
+          'set. You may have multiple copies of React loaded. ' +
+          '(details: https://fb.me/react-refs-must-have-owner).',
+        mixedRef,
+      );
     }
   }
   return mixedRef;