diff --git a/packages/react-dom/src/__tests__/ReactStatelessComponent-test.js b/packages/react-dom/src/__tests__/ReactStatelessComponent-test.js index d9ec8cc6f4c57..e0cc45771b8f7 100644 --- a/packages/react-dom/src/__tests__/ReactStatelessComponent-test.js +++ b/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.', ); }); diff --git a/packages/react-dom/src/__tests__/multiple-copies-of-react-test.js b/packages/react-dom/src/__tests__/multiple-copies-of-react-test.js index ee1cc2032d7d4..b71717d50ff3a 100644 --- a/packages/react-dom/src/__tests__/multiple-copies-of-react-test.js +++ b/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(); }).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.', ); }); }); diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js index 268706c686435..d0504d3869cf4 100644 --- a/packages/react-dom/src/__tests__/refs-test.js +++ b/packages/react-dom/src/__tests__/refs-test.js @@ -392,9 +392,12 @@ describe('creating element with ref in constructor', () => { expect(function() { ReactTestUtils.renderIntoDocument(); }).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.', ); }); }); diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index eb5bbed37f8cd..18de03a03cd56 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/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, ); }