Updated misleading error message in production environment when adding ref to a functional component (#11761)

packages/react-dom/src/__tests__/ReactStatelessComponent-test.js

@@ -149,10 +149,14 @@ describe('ReactStatelessComponent', () => {
     }).toThrowError(
       __DEV__
         ? 'Stateless function components cannot have refs.'
-        : // TODO: the different message in production seems like a bug.
-          // It happens because we don't save _owner in production for
-          // functional components. We should probably show a better message.
-          'Element ref was specified as a string (me) but no owner was set.',
+        : // It happens because we don't save _owner in production for
+          // functional components.
+          'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
+          ' the following reasons:\n' +
+          '1. You may be adding a ref to a functional component\n' +
+          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+          '3. You have multiple copies of React loaded\n' +
+          'See https://fb.me/react-refs-must-have-owner for more information.',
     );
   });
 

packages/react-dom/src/__tests__/multiple-copies-of-react-test.js

@@ -25,9 +25,12 @@ describe('when different React version is used with string ref', () => {
     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).',
+      'Element ref was specified as a string (foo) but no owner was set. This could happen for one of' +
+        ' the following reasons:\n' +
+        '1. You may be adding a ref to a functional component\n' +
+        "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+        '3. You have multiple copies of React loaded\n' +
+        'See https://fb.me/react-refs-must-have-owner for more information.',
     );
   });
 });

packages/react-dom/src/__tests__/refs-test.js

@@ -392,9 +392,12 @@ describe('creating element with ref in constructor', () => {
     expect(function() {
       ReactTestUtils.renderIntoDocument(<RefTest />);
     }).toThrowError(
-      'Element ref was specified as a string (p) but no owner was ' +
-        'set. You may have multiple copies of React loaded. ' +
-        '(details: https://fb.me/react-refs-must-have-owner).',
+      'Element ref was specified as a string (p) but no owner was set. This could happen for one of' +
+        ' the following reasons:\n' +
+        '1. You may be adding a ref to a functional component\n' +
+        "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+        '3. You have multiple copies of React loaded\n' +
+        'See https://fb.me/react-refs-must-have-owner for more information.',
     );
   });
 });

packages/react-reconciler/src/ReactChildFiber.js

@@ -140,9 +140,12 @@ function coerceRef(current: Fiber | null, element: ReactElement) {
       );
       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).',
+        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
+          ' the following reasons:\n' +
+          '1. You may be adding a ref to a functional component\n' +
+          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+          '3. You have multiple copies of React loaded\n' +
+          'See https://fb.me/react-refs-must-have-owner for more information.',
         mixedRef,
       );
     }