@samitouri / QOS-React / commits / 309412d8b6

Improve error message thrown in Fiber with multiple copies of React (#10151)

* WIP Improve error message thrown in Fiber with multiple copies of React **what is the change?:** Adding an 'invariant' with detailed error message for the problem that occurs when you load two copies of React with the Fiber reconciler. WIP: - Is there any other likely cause for this error besides two copies of React? - How can we make the message more clear? Still TODO: - Write a unit test - Write a documentation page and create the link to the page, similar to https://facebook.github.io/react/warnings/refs-must-have-owner.html It would also be nice to have a page with instructions on how to fix common cases of accidental double-loading of React, but we can open a separate issue on that and let the community do it. **why make this change?:** This error comes up relatively often and we want to make things clear when it happens in v16.0+ **test plan:** WIP **issue:** Fixes #9962 * Add improved warning and docs for 'refs must have owner' in Fiber **what is the change?:** - Added warning in the place where this error is thrown in Fiber, to get parity with older versions of React. - Updated docs to mention new error message as well as old one. I started to write a new docs page for the new error, and realized the content was the same as the old one. So then I just updated the existing error page. **why make this change?:** We want to avoid confusion when this error is thrown from React v16. **test plan:** - manually inspected docs page - manually tested in a CRA to trigger the error message (Flarnie will insert screenshots) **issue:** Fixes #9962 Related to #8854 * Add test for the informative warning around multiple react copies @gaearon debugged the test for this and now it works!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!! :) **what is the change?:** We now test for the warning that the previous commits add in Fiber, and also test for the old warning in the stack reconciler. **why make this change?:** This is an especially important warning, and we want to know that it will fire correctly. **test plan:** `yarn test src/renderers/__tests__/multiple-copies-of-react-test.js` `REACT_DOM_JEST_USE_FIBER=1 yarn test src/renderers/__tests__/multiple-copies-of-react-test.js` * Fix up test for 'multiple copies of react' **what is the change?:** refactor test for 'multiple copies of React' to be simpler and remove some copypasta * run prettier * Fix conditionals in 'multiple copies of react' test **what is the change?:** When moving the 'fiber' and 'non-fiber' conditions from two assertions into one, we copy pasted the wrong message into the 'fiber' condition. This wasn't caught because we were using an outdated name for the 'fiber' constant when running the tests locally with fiber enabled. This fixes the copy-paste error and we now are actually running the tests with fiber enabled locally. * Run scripts/fiber/record-tests

Flarnie Marchan committed Jul 13, 2017 at 10:41 UTC 309412d8b6d6ed0cfbb50a6be2f1a99cca36fea5
4 files changed +73 -1
docs/warnings/refs-must-have-owner.md
+7 -1
@@ -4,8 +4,14 @@ layout: single
4 permalink: warnings/refs-must-have-owner.html
5 ---
6
7 -You are probably here because you got the following error messages:
7 +You are probably here because you got one of the following error messages:
8
9 +*React 16.0.0+*
10 +> Warning:
11 +>
12 +> 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).
13 +
14 +*earlier versions of React*
15 > Warning:
16 >
17 > 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
+3
@@ -597,6 +597,9 @@ src/renderers/__tests__/ReactUpdates-test.js
597 * does not re-render if state update is null
598 * synchronously renders hidden subtrees
599
600 +src/renderers/__tests__/multiple-copies-of-react-test.js
601 +* throws the "Refs must have owner" warning
602 +
603 src/renderers/__tests__/refs-destruction-test.js
604 * should remove refs when destroying the parent
605 * should remove refs when destroying the child
src/renderers/__tests__/multiple-copies-of-react-test.js new
+51
@@ -0,0 +1,51 @@
1 +/**
2 + * Copyright 2013-present, Facebook, Inc.
3 + * All rights reserved.
4 + *
5 + * This source code is licensed under the BSD-style license found in the
6 + * LICENSE file in the root directory of this source tree. An additional grant
7 + * of patent rights can be found in the PATENTS file in the same directory.
8 + *
9 + * @emails react-core
10 + */
11 +
12 +'use strict';
13 +
14 +let React = require('react');
15 +var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
16 +var ReactTestUtils = require('react-dom/test-utils');
17 +
18 +class TextWithStringRef extends React.Component {
19 + render() {
20 + jest.resetModules();
21 + React = require('react');
22 + return (
23 + <span ref="foo">
24 + Hello world!
25 + </span>
26 + );
27 + }
28 +}
29 +
30 +describe('when different React version is used with string ref', () => {
31 + it('throws the "Refs must have owner" warning', () => {
32 + if (ReactDOMFeatureFlags.useFiber) {
33 + expect(() => {
34 + ReactTestUtils.renderIntoDocument(<TextWithStringRef />);
35 + }).toThrow(
36 + 'Element ref was specified as a string (foo) but no owner was set.' +
37 + ' You may have multiple copies of React loaded. (details: ' +
38 + 'https://fb.me/react-refs-must-have-owner).',
39 + );
40 + } else {
41 + expect(() => {
42 + ReactTestUtils.renderIntoDocument(<TextWithStringRef />);
43 + }).toThrow(
44 + 'Only a ReactOwner can have refs. You might be adding a ref to a ' +
45 + "component that was not created inside a component's `render` " +
46 + 'method, or you have multiple copies of React loaded ' +
47 + '(details: https://fb.me/react-refs-must-have-owner)',
48 + );
49 + }
50 + });
51 +});
src/renderers/shared/fiber/ReactChildFiber.js
+12
@@ -162,6 +162,18 @@ function coerceRef(current: Fiber | null, element: ReactElement) {
162 };
163 ref._stringRef = stringRef;
164 return ref;
165 + } else {
166 + invariant(
167 + typeof mixedRef === 'string',
168 + 'Expected ref to be a function or a string.',
169 + );
170 + invariant(
171 + element._owner,
172 + 'Element ref was specified as a string (%s) but no owner was ' +
173 + 'set. You may have multiple copies of React loaded. ' +
174 + '(details: https://fb.me/react-refs-must-have-owner).',
175 + mixedRef,
176 + );
177 }
178 }
179 return mixedRef;