Updated misleading error message in production environment when adding ref to a functional component (#11761) (#11782)
* Updated misleading error message in production environment when adding ref to a functional component * Reverted changes to codes.json * Updated error message
Sotiris Kiritsis committed
Jan 5, 2018 at 20:07 UTC
588198d2665db9c45d22687bfaaa87121674d3a2
4 files changed
+26
-13
packages/react-dom/src/__tests__/ReactStatelessComponent-test.js
+8
-4
@@ -144,10 +144,14 @@ describe('ReactStatelessComponent', () => {
144
}).toThrowError(
145
__DEV__
146
? 'Stateless function components cannot have refs.'
147
- : // TODO: the different message in production seems like a bug.
148
- // It happens because we don't save _owner in production for
149
- // functional components. We should probably show a better message.
150
- 'Element ref was specified as a string (me) but no owner was set.',
147
+ : // It happens because we don't save _owner in production for
148
+ // functional components.
149
+ 'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
150
+ ' the following reasons:\n' +
151
+ '1. You may be adding a ref to a functional component\n' +
152
+ "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
153
+ '3. You have multiple copies of React loaded\n' +
154
+ 'See https://fb.me/react-refs-must-have-owner for more information.',
155
);
156
});
157
packages/react-dom/src/__tests__/multiple-copies-of-react-test.js
+6
-3
@@ -25,9 +25,12 @@ describe('when different React version is used with string ref', () => {
25
expect(() => {
26
ReactTestUtils.renderIntoDocument(<TextWithStringRef />);
27
}).toThrow(
28
- 'Element ref was specified as a string (foo) but no owner was set.' +
29
- ' You may have multiple copies of React loaded. (details: ' +
30
- 'https://fb.me/react-refs-must-have-owner).',
28
+ 'Element ref was specified as a string (foo) but no owner was set. This could happen for one of' +
29
+ ' the following reasons:\n' +
30
+ '1. You may be adding a ref to a functional component\n' +
31
+ "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
32
+ '3. You have multiple copies of React loaded\n' +
33
+ 'See https://fb.me/react-refs-must-have-owner for more information.',
34
);
35
});
36
});
packages/react-dom/src/__tests__/refs-test.js
+6
-3
@@ -392,9 +392,12 @@ describe('creating element with ref in constructor', () => {
392
expect(function() {
393
ReactTestUtils.renderIntoDocument(<RefTest />);
394
}).toThrowError(
395
- 'Element ref was specified as a string (p) but no owner was ' +
396
- 'set. You may have multiple copies of React loaded. ' +
397
- '(details: https://fb.me/react-refs-must-have-owner).',
395
+ 'Element ref was specified as a string (p) but no owner was set. This could happen for one of' +
396
+ ' the following reasons:\n' +
397
+ '1. You may be adding a ref to a functional component\n' +
398
+ "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
399
+ '3. You have multiple copies of React loaded\n' +
400
+ 'See https://fb.me/react-refs-must-have-owner for more information.',
401
);
402
});
403
});
packages/react-reconciler/src/ReactChildFiber.js
+6
-3
@@ -138,9 +138,12 @@ function coerceRef(current: Fiber | null, element: ReactElement) {
138
);
139
invariant(
140
element._owner,
141
- 'Element ref was specified as a string (%s) but no owner was ' +
142
- 'set. You may have multiple copies of React loaded. ' +
143
- '(details: https://fb.me/react-refs-must-have-owner).',
141
+ 'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
142
+ ' the following reasons:\n' +
143
+ '1. You may be adding a ref to a functional component\n' +
144
+ "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
145
+ '3. You have multiple copies of React loaded\n' +
146
+ 'See https://fb.me/react-refs-must-have-owner for more information.',
147
mixedRef,
148
);
149
}