@samitouri / QOS-React / commits / d579e77482

Fork 0

The library for web and native user interfaces.

Remove method name prefix from warnings and errors (#28432)

This pattern is a petpeeve of mine. I don't consider this best practice and so most don't have these prefixes. Very inconsistent. At best this is useless and noisey that you have to parse because the information is also in the stack trace. At worse these are misleading because they're highlighting something internal (like validateDOMNesting) which even suggests an internal bug. Even the ones public to React aren't necessarily what you called because you might be calling a wrapper around it. That would be properly reflected in a stack trace - which can also properly ignore list so that the first stack you see is your callsite, Which might be like `render()` in react-testing-library rather than `createRoot()` for example.

Sebastian Markbåge committed Feb 23, 2024 at 15:16 UTC d579e7748218920331252b0528850943d5e2dd31

39 files changed +188 -215

packages/react-dom-bindings/src/client/validateDOMNesting.js

+4 -8

@@ -477,15 +477,14 @@ function validateDOMNesting(

477 'the browser.';

478 }

479 console.error(

480 - 'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s',

480 + '%s cannot appear as a child of <%s>.%s',

481 tagDisplayName,

482 ancestorTag,

483 info,

484 );

485 } else {

486 console.error(

487 - 'validateDOMNesting(...): %s cannot appear as a descendant of ' +

488 - '<%s>.',

487 + '%s cannot appear as a descendant of ' + '<%s>.',

488 tagDisplayName,

489 ancestorTag,

490 );

@@ -507,13 +506,10 @@ function validateTextNesting(childText: string, parentTag: string): void {

506 didWarn[warnKey] = true;

507

508 if (/\S/.test(childText)) {

510 - console.error(

511 - 'validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.',

512 - parentTag,

513 - );

509 + console.error('Text nodes cannot appear as a child of <%s>.', parentTag);

510 } else {

511 console.error(

516 - 'validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. ' +

512 + 'Whitespace text nodes cannot appear as a child of <%s>. ' +

513 "Make sure you don't have any extra whitespace between tags on " +

514 'each line of your source code.',

515 parentTag,

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

+13 -13

@@ -879,7 +879,7 @@ describe('ReactCompositeComponent', () => {

879 root.render(<Foo idx="qwe" />);

880 });

881 }).toErrorDev(

882 - 'Foo(...): When calling super() in `Foo`, make sure to pass ' +

882 + 'When calling super() in `Foo`, make sure to pass ' +

883 "up the same props that your component's constructor was passed.",

884 );

885 });

@@ -1233,14 +1233,14 @@ describe('ReactCompositeComponent', () => {

1233 }).toErrorDev([

1234 // Expect two errors because invokeGuardedCallback will dispatch an error event,

1235 // Causing the warning to be logged again.

1236 - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +

1236 + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' +

1237 'did you accidentally return an object from the constructor?',

1238 - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +

1238 + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' +

1239 'did you accidentally return an object from the constructor?',

1240 // And then two more because we retry errors.

1241 - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +

1241 + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' +

1242 'did you accidentally return an object from the constructor?',

1243 - 'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +

1243 + 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' +

1244 'did you accidentally return an object from the constructor?',

1245 ]);

1246 });

@@ -1280,16 +1280,16 @@ describe('ReactCompositeComponent', () => {

1280 }).toErrorDev([

1281 // Expect two errors because invokeGuardedCallback will dispatch an error event,

1282 // Causing the warning to be logged again.

1283 - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +

1284 - 'component instance: you may have forgotten to define `render`.',

1285 - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +

1286 - 'component instance: you may have forgotten to define `render`.',

1283 + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' +

1284 + 'you may have forgotten to define `render`.',

1285 + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' +

1286 + 'you may have forgotten to define `render`.',

1287

1288 // And then two more because we retry errors.

1289 - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +

1290 - 'component instance: you may have forgotten to define `render`.',

1291 - 'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +

1292 - 'component instance: you may have forgotten to define `render`.',

1289 + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' +

1290 + 'you may have forgotten to define `render`.',

1291 + 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' +

1292 + 'you may have forgotten to define `render`.',

1293 ]);

1294 });

1295

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

+6 -6

@@ -183,7 +183,7 @@ describe('ReactDOM', () => {

183 expect(() => {

184 ReactDOM.render(<A />, myDiv, 'no');

185 }).toErrorDev(

186 - 'render(...): Expected the last optional `callback` argument to be ' +

186 + 'Expected the last optional `callback` argument to be ' +

187 'a function. Instead received: no.',

188 );

189 }).toThrowError(

@@ -195,7 +195,7 @@ describe('ReactDOM', () => {

195 expect(() => {

196 ReactDOM.render(<A />, myDiv, {foo: 'bar'});

197 }).toErrorDev(

198 - 'render(...): Expected the last optional `callback` argument to be ' +

198 + 'Expected the last optional `callback` argument to be ' +

199 'a function. Instead received: [object Object].',

200 );

201 }).toThrowError(

@@ -207,7 +207,7 @@ describe('ReactDOM', () => {

207 expect(() => {

208 ReactDOM.render(<A />, myDiv, new Foo());

209 }).toErrorDev(

210 - 'render(...): Expected the last optional `callback` argument to be ' +

210 + 'Expected the last optional `callback` argument to be ' +

211 'a function. Instead received: [object Object].',

212 );

213 }).toThrowError(

@@ -236,7 +236,7 @@ describe('ReactDOM', () => {

236 expect(() => {

237 ReactDOM.render(<A />, myDiv, 'no');

238 }).toErrorDev(

239 - 'render(...): Expected the last optional `callback` argument to be ' +

239 + 'Expected the last optional `callback` argument to be ' +

240 'a function. Instead received: no.',

241 );

242 }).toThrowError(

@@ -249,7 +249,7 @@ describe('ReactDOM', () => {

249 expect(() => {

250 ReactDOM.render(<A />, myDiv, {foo: 'bar'});

251 }).toErrorDev(

252 - 'render(...): Expected the last optional `callback` argument to be ' +

252 + 'Expected the last optional `callback` argument to be ' +

253 'a function. Instead received: [object Object].',

254 );

255 }).toThrowError(

@@ -262,7 +262,7 @@ describe('ReactDOM', () => {

262 expect(() => {

263 ReactDOM.render(<A />, myDiv, new Foo());

264 }).toErrorDev(

265 - 'render(...): Expected the last optional `callback` argument to be ' +

265 + 'Expected the last optional `callback` argument to be ' +

266 'a function. Instead received: [object Object].',

267 );

268 }).toThrowError(

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

+7 -7

@@ -2188,7 +2188,7 @@ describe('ReactDOMComponent', () => {

2188 );

2189 });

2190 }).toErrorDev([

2191 - 'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +

2191 + 'Warning: <tr> cannot appear as a child of ' +

2192 '<div>.' +

2193 '\n in tr (at **)' +

2194 '\n in div (at **)',

@@ -2208,7 +2208,7 @@ describe('ReactDOMComponent', () => {

2208 );

2209 });

2210 }).toErrorDev(

2211 - 'Warning: validateDOMNesting(...): <p> cannot appear as a descendant ' +

2211 + 'Warning: <p> cannot appear as a descendant ' +

2212 'of <p>.' +

2213 // There is no outer `p` here because root container is not part of the stack.

2214 '\n in p (at **)' +

@@ -2241,20 +2241,20 @@ describe('ReactDOMComponent', () => {

2241 root.render(<Foo />);

2242 });

2243 }).toErrorDev([

2244 - 'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +

2244 + 'Warning: <tr> cannot appear as a child of ' +

2245 '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +

2246 'by the browser.' +

2247 '\n in tr (at **)' +

2248 '\n in Row (at **)' +

2249 '\n in table (at **)' +

2250 '\n in Foo (at **)',

2251 - 'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' +

2251 + 'Warning: Text nodes cannot appear as a ' +

2252 'child of <tr>.' +

2253 '\n in tr (at **)' +

2254 '\n in Row (at **)' +

2255 '\n in table (at **)' +

2256 '\n in Foo (at **)',

2257 - 'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' +

2257 + 'Warning: Whitespace text nodes cannot ' +

2258 "appear as a child of <table>. Make sure you don't have any extra " +

2259 'whitespace between tags on each line of your source code.' +

2260 '\n in table (at **)' +

@@ -2283,7 +2283,7 @@ describe('ReactDOMComponent', () => {

2283 root.render(<Foo> </Foo>);

2284 });

2285 }).toErrorDev([

2286 - 'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' +

2286 + 'Warning: Whitespace text nodes cannot ' +

2287 "appear as a child of <table>. Make sure you don't have any extra " +

2288 'whitespace between tags on each line of your source code.' +

2289 '\n in table (at **)' +

@@ -2311,7 +2311,7 @@ describe('ReactDOMComponent', () => {

2311 );

2312 });

2313 }).toErrorDev([

2314 - 'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' +

2314 + 'Warning: Text nodes cannot appear as a ' +

2315 'child of <tr>.' +

2316 '\n in tr (at **)' +

2317 '\n in Row (at **)' +

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

+10 -10

@@ -523,7 +523,7 @@ describe('ReactDOMFloat', () => {

523 }).toErrorDev(

524 [

525 'Cannot render <noscript> outside the main document. Try moving it into the root <head> tag.',

526 - 'Warning: validateDOMNesting(...): <noscript> cannot appear as a child of <#document>.',

526 + 'Warning: <noscript> cannot appear as a child of <#document>.',

527 ],

528 {withoutStack: 1},

529 );

@@ -538,7 +538,7 @@ describe('ReactDOMFloat', () => {

538 await waitForAll([]);

539 }).toErrorDev([

540 'Cannot render <template> outside the main document. Try moving it into the root <head> tag.',

541 - 'Warning: validateDOMNesting(...): <template> cannot appear as a child of <html>.',

541 + 'Warning: <template> cannot appear as a child of <html>.',

542 ]);

543

544 await expect(async () => {

@@ -551,7 +551,7 @@ describe('ReactDOMFloat', () => {

551 await waitForAll([]);

552 }).toErrorDev([

553 'Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags. Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.',

554 - 'Warning: validateDOMNesting(...): <style> cannot appear as a child of <html>.',

554 + 'Warning: <style> cannot appear as a child of <html>.',

555 ]);

556

557 await expect(async () => {

@@ -574,7 +574,7 @@ describe('ReactDOMFloat', () => {

574 }).toErrorDev(

575 [

576 'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root <head> tag.',

577 - 'Warning: validateDOMNesting(...): <link> cannot appear as a child of <#document>.',

577 + 'Warning: <link> cannot appear as a child of <#document>.',

578 ],

579 {withoutStack: 1},

580 );

@@ -591,7 +591,7 @@ describe('ReactDOMFloat', () => {

591 await waitForAll([]);

592 }).toErrorDev([

593 'Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.',

594 - 'Warning: validateDOMNesting(...): <script> cannot appear as a child of <html>.',

594 + 'Warning: <script> cannot appear as a child of <html>.',

595 ]);

596

597 await expect(async () => {

@@ -2552,11 +2552,11 @@ body {

2552 'Cannot render a <style> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <style> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',

2553 'Cannot render a <link> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <link> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',

2554 'Cannot render a <script> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <script> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',

2555 - 'validateDOMNesting(...): <meta> cannot appear as a child of <html>',

2556 - 'validateDOMNesting(...): <title> cannot appear as a child of <html>',

2557 - 'validateDOMNesting(...): <style> cannot appear as a child of <html>',

2558 - 'validateDOMNesting(...): <link> cannot appear as a child of <html>',

2559 - 'validateDOMNesting(...): <script> cannot appear as a child of <html>',

2555 + '<meta> cannot appear as a child of <html>',

2556 + '<title> cannot appear as a child of <html>',

2557 + '<style> cannot appear as a child of <html>',

2558 + '<link> cannot appear as a child of <html>',

2559 + '<script> cannot appear as a child of <html>',

2560 ]);

2561 });

2562

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

+1 -1

@@ -381,7 +381,7 @@ describe('ReactDOMForm', () => {

381 );

382 });

383 }).toErrorDev([

384 - 'Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>.' +

384 + 'Warning: <form> cannot appear as a descendant of <form>.' +

385 '\n in form (at **)' +

386 '\n in form (at **)',

387 ]);

packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js

+1 -1

@@ -48,7 +48,7 @@ describe('ReactDOMComponentTree', () => {

48 const anotherComponent = <div />;

49 const instance = ReactDOM.render(component, container);

50 expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(

51 - 'render(...): Replacing React-rendered children with a new root ' +

51 + 'Replacing React-rendered children with a new root ' +

52 'component. If you intended to update the children of this node, ' +

53 'you should instead have the existing children update their state ' +

54 'and render the new components instead of calling ReactDOM.render.',

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

+3 -3

@@ -1200,7 +1200,7 @@ describe('ReactDOMLegacyFiber', () => {

1200 expect(() =>

1201 ReactDOM.render(<div key="2">baz</div>, container),

1202 ).toErrorDev(

1203 - 'render(...): ' +

1203 + '' +

1204 'It looks like the React-rendered content of this container was ' +

1205 'removed without using React. This is not supported and will ' +

1206 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +

@@ -1218,7 +1218,7 @@ describe('ReactDOMLegacyFiber', () => {

1218 // then we mess with the DOM before an update

1219 container.innerHTML = '<div>MEOW.</div>';

1220 expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(

1221 - 'render(...): ' +

1221 + '' +

1222 'It looks like the React-rendered content of this container was ' +

1223 'removed without using React. This is not supported and will ' +

1224 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +

@@ -1235,7 +1235,7 @@ describe('ReactDOMLegacyFiber', () => {

1235 // then we mess with the DOM before an update

1236 container.innerHTML = '';

1237 expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(

1238 - 'render(...): ' +

1238 + '' +

1239 'It looks like the React-rendered content of this container was ' +

1240 'removed without using React. This is not supported and will ' +

1241 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +

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

+2 -2

@@ -46,7 +46,7 @@ describe('ReactDOMOption', () => {

46 expect(() => {

47 node = ReactTestUtils.renderIntoDocument(el);

48 }).toErrorDev(

49 - 'validateDOMNesting(...): <div> cannot appear as a child of <option>.\n' +

49 + '<div> cannot appear as a child of <option>.\n' +

50 ' in div (at **)\n' +

51 ' in option (at **)',

52 );

@@ -263,7 +263,7 @@ describe('ReactDOMOption', () => {

263 [

264 'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',

265 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>',

266 - 'Warning: validateDOMNesting(...): <div> cannot appear as a child of <option>',

266 + 'Warning: <div> cannot appear as a child of <option>',

267 ],

268 {withoutStack: 1},

269 );

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

+6 -6

@@ -71,7 +71,7 @@ describe('ReactDOMRoot', () => {

71 const callback = jest.fn();

72 const root = ReactDOMClient.createRoot(container);

73 expect(() => root.render(<div>Hi</div>, callback)).toErrorDev(

74 - 'render(...): does not support the second callback argument. ' +

74 + 'does not support the second callback argument. ' +

75 'To execute a side effect after rendering, declare it in a component body with useEffect().',

76 {withoutStack: true},

77 );

@@ -115,7 +115,7 @@ describe('ReactDOMRoot', () => {

115 const root = ReactDOMClient.createRoot(container);

116 root.render(<div>Hi</div>);

117 expect(() => root.unmount(callback)).toErrorDev(

118 - 'unmount(...): does not support a callback argument. ' +

118 + 'does not support a callback argument. ' +

119 'To execute a side effect after rendering, declare it in a component body with useEffect().',

120 {withoutStack: true},

121 );

@@ -199,7 +199,7 @@ describe('ReactDOMRoot', () => {

199 it('throws a good message on invalid containers', () => {

200 expect(() => {

201 ReactDOMClient.createRoot(<div>Hi</div>);

202 - }).toThrow('createRoot(...): Target container is not a DOM element.');

202 + }).toThrow('Target container is not a DOM element.');

203 });

204

205 it('warns when creating two roots managing the same container', () => {

@@ -253,7 +253,7 @@ describe('ReactDOMRoot', () => {

253 expect(() => {

254 root.render(<div>Hi</div>);

255 }).toErrorDev(

256 - 'render(...): It looks like the React-rendered content of the ' +

256 + 'It looks like the React-rendered content of the ' +

257 'root container was removed without using React. This is not ' +

258 'supported and will cause errors. Instead, call ' +

259 "root.unmount() to empty a root's container.",

@@ -446,10 +446,10 @@ describe('ReactDOMRoot', () => {

446 const commentNode = div.childNodes[0];

447

448 expect(() => ReactDOMClient.createRoot(commentNode)).toThrow(

449 - 'createRoot(...): Target container is not a DOM element.',

449 + 'Target container is not a DOM element.',

450 );

451 expect(() => ReactDOMClient.hydrateRoot(commentNode)).toThrow(

452 - 'hydrateRoot(...): Target container is not a DOM element.',

452 + 'Target container is not a DOM element.',

453 );

454 });

455

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

+1 -1

@@ -260,7 +260,7 @@ describe('ReactDOMServerLifecycles', () => {

260 '<div>1-2</div>',

261 );

262 }).toErrorDev(

263 - 'Warning: setState(...): Can only update a mounting component. This ' +

263 + 'Warning: Can only update a mounting component. This ' +

264 'usually means you called setState() outside componentWillMount() on ' +

265 'the server. This is a no-op.\n\n' +

266 'Please check the code for the Outer component.',

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

+1 -2

@@ -154,8 +154,7 @@ describe('ReactFunctionComponent', () => {

154 root.render(<FunctionComponentWithChildContext name="A" />);

155 });

156 }).toErrorDev(

157 - 'FunctionComponentWithChildContext(...): childContextTypes cannot ' +

158 - 'be defined on a function component.',

157 + 'childContextTypes cannot ' + 'be defined on a function component.',

158 );

159 });

160

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

+2 -4

@@ -41,9 +41,7 @@ describe('ReactMount', () => {

41 const nodeArray = document.getElementsByTagName('div');

42 expect(() => {

43 ReactDOM.unmountComponentAtNode(nodeArray);

44 - }).toThrowError(

45 - 'unmountComponentAtNode(...): Target container is not a DOM element.',

46 - );

44 + }).toThrowError('Target container is not a DOM element.');

45 });

47 it('returns false on non-React containers', () => {

@@ -201,7 +199,7 @@ describe('ReactMount', () => {

199 const rootNode = container.firstChild;

200

201 expect(() => ReactDOM.render(<span />, rootNode)).toErrorDev(

204 - 'Warning: render(...): Replacing React-rendered children with a new ' +

202 + 'Warning: Replacing React-rendered children with a new ' +

203 'root component. If you intended to update the children of this node, ' +

204 'you should instead have the existing children update their state and ' +

205 'render the new components instead of calling ReactDOM.render.',

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

+4 -4

@@ -872,7 +872,7 @@ describe('ReactLegacyUpdates', () => {

872

873 expect(() => {

874 expect(() => component.setState({}, 'no')).toErrorDev(

875 - 'setState(...): Expected the last optional `callback` argument to be ' +

875 + 'Expected the last optional `callback` argument to be ' +

876 'a function. Instead received: no.',

877 );

878 }).toThrowError(

@@ -882,7 +882,7 @@ describe('ReactLegacyUpdates', () => {

882 component = ReactTestUtils.renderIntoDocument(<A />);

883 expect(() => {

884 expect(() => component.setState({}, {foo: 'bar'})).toErrorDev(

885 - 'setState(...): Expected the last optional `callback` argument to be ' +

885 + 'Expected the last optional `callback` argument to be ' +

886 'a function. Instead received: [object Object].',

887 );

888 }).toThrowError(

@@ -915,7 +915,7 @@ describe('ReactLegacyUpdates', () => {

915

916 expect(() => {

917 expect(() => component.forceUpdate('no')).toErrorDev(

918 - 'forceUpdate(...): Expected the last optional `callback` argument to be ' +

918 + 'Expected the last optional `callback` argument to be ' +

919 'a function. Instead received: no.',

920 );

921 }).toThrowError(

@@ -925,7 +925,7 @@ describe('ReactLegacyUpdates', () => {

925 component = ReactTestUtils.renderIntoDocument(<A />);

926 expect(() => {

927 expect(() => component.forceUpdate({foo: 'bar'})).toErrorDev(

928 - 'forceUpdate(...): Expected the last optional `callback` argument to be ' +

928 + 'Expected the last optional `callback` argument to be ' +

929 'a function. Instead received: [object Object].',

930 );

931 }).toThrowError(

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

+2 -2

@@ -683,7 +683,7 @@ describe('ReactDOMServer', () => {

683

684 ReactDOMServer.renderToString(<Foo />);

685 expect(() => jest.runOnlyPendingTimers()).toErrorDev(

686 - 'Warning: setState(...): Can only update a mounting component.' +

686 + 'Warning: Can only update a mounting component.' +

687 ' This usually means you called setState() outside componentWillMount() on the server.' +

688 ' This is a no-op.\n\nPlease check the code for the Foo component.',

689 {withoutStack: true},

@@ -711,7 +711,7 @@ describe('ReactDOMServer', () => {

711

712 ReactDOMServer.renderToString(<Baz />);

713 expect(() => jest.runOnlyPendingTimers()).toErrorDev(

714 - 'Warning: forceUpdate(...): Can only update a mounting component. ' +

714 + 'Warning: Can only update a mounting component. ' +

715 'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +

716 'This is a no-op.\n\nPlease check the code for the Baz component.',

717 {withoutStack: true},

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

+7 -7

@@ -281,19 +281,19 @@ describe('ReactTestUtils', () => {

281 expect(() => {

282 ReactTestUtils.findAllInRenderedTree([], 'span');

283 }).toThrow(

284 - 'findAllInRenderedTree(...): the first argument must be a React class instance. ' +

284 + 'The first argument must be a React class instance. ' +

285 'Instead received: an array.',

286 );

287 expect(() => {

288 ReactTestUtils.scryRenderedDOMComponentsWithClass(10, 'button');

289 }).toThrow(

290 - 'scryRenderedDOMComponentsWithClass(...): the first argument must be a React class instance. ' +

290 + 'The first argument must be a React class instance. ' +

291 'Instead received: 10.',

292 );

293 expect(() => {

294 ReactTestUtils.findRenderedDOMComponentWithClass('hello', 'button');

295 }).toThrow(

296 - 'findRenderedDOMComponentWithClass(...): the first argument must be a React class instance. ' +

296 + 'The first argument must be a React class instance. ' +

297 'Instead received: hello.',

298 );

299 expect(() => {

@@ -302,26 +302,26 @@ describe('ReactTestUtils', () => {

302 'span',

303 );

304 }).toThrow(

305 - 'scryRenderedDOMComponentsWithTag(...): the first argument must be a React class instance. ' +

305 + 'The first argument must be a React class instance. ' +

306 'Instead received: object with keys {x, y}.',

307 );

308 const div = document.createElement('div');

309 expect(() => {

310 ReactTestUtils.findRenderedDOMComponentWithTag(div, 'span');

311 }).toThrow(

312 - 'findRenderedDOMComponentWithTag(...): the first argument must be a React class instance. ' +

312 + 'The first argument must be a React class instance. ' +

313 'Instead received: a DOM node.',

314 );

315 expect(() => {

316 ReactTestUtils.scryRenderedComponentsWithType(true, 'span');

317 }).toThrow(

318 - 'scryRenderedComponentsWithType(...): the first argument must be a React class instance. ' +

318 + 'The first argument must be a React class instance. ' +

319 'Instead received: true.',

320 );

321 expect(() => {

322 ReactTestUtils.findRenderedComponentWithType(true, 'span');

323 }).toThrow(

324 - 'findRenderedComponentWithType(...): the first argument must be a React class instance. ' +

324 + 'The first argument must be a React class instance. ' +

325 'Instead received: true.',

326 );

327 });

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

+4 -4

@@ -1043,7 +1043,7 @@ describe('ReactUpdates', () => {

1043 component.setState({}, 'no');

1044 });

1045 }).toErrorDev(

1046 - 'setState(...): Expected the last optional `callback` argument to be ' +

1046 + 'Expected the last optional `callback` argument to be ' +

1047 'a function. Instead received: no.',

1048 ),

1049 ).rejects.toThrowError(

@@ -1062,7 +1062,7 @@ describe('ReactUpdates', () => {

1062 component.setState({}, {foo: 'bar'});

1063 });

1064 }).toErrorDev(

1065 - 'setState(...): Expected the last optional `callback` argument to be ' +

1065 + 'Expected the last optional `callback` argument to be ' +

1066 'a function. Instead received: [object Object].',

1067 ),

1068 ).rejects.toThrowError(

@@ -1112,7 +1112,7 @@ describe('ReactUpdates', () => {

1112 component.forceUpdate('no');

1113 });

1114 }).toErrorDev(

1115 - 'forceUpdate(...): Expected the last optional `callback` argument to be ' +

1115 + 'Expected the last optional `callback` argument to be ' +

1116 'a function. Instead received: no.',

1117 ),

1118 ).rejects.toThrowError(

@@ -1131,7 +1131,7 @@ describe('ReactUpdates', () => {

1131 component.forceUpdate({foo: 'bar'});

1132 });

1133 }).toErrorDev(

1134 - 'forceUpdate(...): Expected the last optional `callback` argument to be ' +

1134 + 'Expected the last optional `callback` argument to be ' +

1135 'a function. Instead received: [object Object].',

1136 ),

1137 ).rejects.toThrowError(

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

+8 -20

@@ -60,29 +60,23 @@ describe('validateDOMNesting', () => {

60 it('prevents problematic nestings', () => {

61 expectWarnings(

62 ['a', 'a'],

63 - [

64 - 'validateDOMNesting(...): <a> cannot appear as a descendant of <a>.\n' +

65 - ' in a (at **)',

66 - ],

63 + ['<a> cannot appear as a descendant of <a>.\n' + ' in a (at **)'],

64 );

65 expectWarnings(

66 ['form', 'form'],

67 [

71 - 'validateDOMNesting(...): <form> cannot appear as a descendant of <form>.\n' +

68 + '<form> cannot appear as a descendant of <form>.\n' +

69 ' in form (at **)',

70 ],

71 );

72 expectWarnings(

73 ['p', 'p'],

77 - [

78 - 'validateDOMNesting(...): <p> cannot appear as a descendant of <p>.\n' +

79 - ' in p (at **)',

80 - ],

74 + ['<p> cannot appear as a descendant of <p>.\n' + ' in p (at **)'],

75 );

76 expectWarnings(

77 ['table', 'tr'],

78 [

85 - 'validateDOMNesting(...): <tr> cannot appear as a child of <table>. ' +

79 + '<tr> cannot appear as a child of <table>. ' +

80 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +

81 ' in tr (at **)',

82 ],

@@ -90,7 +84,7 @@ describe('validateDOMNesting', () => {

84 expectWarnings(

85 ['div', 'ul', 'li', 'div', 'li'],

86 [

93 - 'validateDOMNesting(...): <li> cannot appear as a descendant of <li>.\n' +

87 + '<li> cannot appear as a descendant of <li>.\n' +

88 ' in li (at **)\n' +

89 ' in div (at **)\n' +

90 ' in li (at **)\n' +

@@ -99,22 +93,16 @@ describe('validateDOMNesting', () => {

93 );

94 expectWarnings(

95 ['div', 'html'],

102 - [

103 - 'validateDOMNesting(...): <html> cannot appear as a child of <div>.\n' +

104 - ' in html (at **)',

105 - ],

96 + ['<html> cannot appear as a child of <div>.\n' + ' in html (at **)'],

97 );

98 expectWarnings(

99 ['body', 'body'],

109 - [

110 - 'validateDOMNesting(...): <body> cannot appear as a child of <body>.\n' +

111 - ' in body (at **)',

112 - ],

100 + ['<body> cannot appear as a child of <body>.\n' + ' in body (at **)'],

101 );

102 expectWarnings(

103 ['svg', 'foreignObject', 'body', 'p'],

104 [

117 - 'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>.\n' +

105 + '<body> cannot appear as a child of <foreignObject>.\n' +

106 ' in body (at **)\n' +

107 ' in foreignObject (at **)',

108 'Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.\n' +

packages/react-dom/src/client/ReactDOMLegacy.js

+6 -9

@@ -57,7 +57,7 @@ if (__DEV__) {

57 if (hostInstance) {

58 if (hostInstance.parentNode !== container) {

59 console.error(

60 - 'render(...): It looks like the React-rendered content of this ' +

60 + 'It looks like the React-rendered content of this ' +

61 'container was removed without using React. This is not ' +

62 'supported and will cause errors. Instead, call ' +

63 'ReactDOM.unmountComponentAtNode to empty a container.',

@@ -72,7 +72,7 @@ if (__DEV__) {

73 if (hasNonRootReactChild && !isRootRenderedBySomeReact) {

74 console.error(

75 - 'render(...): Replacing React-rendered children with a new root ' +

75 + 'Replacing React-rendered children with a new root ' +

76 'component. If you intended to update the children of this node, ' +

77 'you should instead have the existing children update their state ' +

78 'and render the new components instead of calling ReactDOM.render.',

@@ -177,13 +177,12 @@ function legacyCreateRootFromDOMContainer(

177 }

178 }

179

180 -function warnOnInvalidCallback(callback: mixed, callerName: string): void {

180 +function warnOnInvalidCallback(callback: mixed): void {

181 if (__DEV__) {

182 if (callback !== null && typeof callback !== 'function') {

183 console.error(

184 - '%s(...): Expected the last optional `callback` argument to be a ' +

184 + 'Expected the last optional `callback` argument to be a ' +

185 'function. Instead received: %s.',

186 - callerName,

186 callback,

187 );

188 }

@@ -199,7 +198,7 @@ function legacyRenderSubtreeIntoContainer(

198 ): React$Component<any, any> | PublicInstance | null {

199 if (__DEV__) {

200 topLevelUpdateWarnings(container);

202 - warnOnInvalidCallback(callback === undefined ? null : callback, 'render');

201 + warnOnInvalidCallback(callback === undefined ? null : callback);

202 }

203

204 const maybeRoot = container._reactRootContainer;

@@ -373,9 +372,7 @@ export function unstable_renderSubtreeIntoContainer(

372

373 export function unmountComponentAtNode(container: Container): boolean {

374 if (!isValidContainerLegacy(container)) {

376 - throw new Error(

377 - 'unmountComponentAtNode(...): Target container is not a DOM element.',

378 - );

375 + throw new Error('Target container is not a DOM element.');

376 }

377

378 if (__DEV__) {

packages/react-dom/src/client/ReactDOMRoot.js

+4 -4

@@ -109,7 +109,7 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render =

109 if (__DEV__) {

110 if (typeof arguments[1] === 'function') {

111 console.error(

112 - 'render(...): does not support the second callback argument. ' +

112 + 'does not support the second callback argument. ' +

113 'To execute a side effect after rendering, declare it in a component body with useEffect().',

114 );

115 } else if (isValidContainer(arguments[1])) {

@@ -134,7 +134,7 @@ ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount =

134 if (__DEV__) {

135 if (typeof arguments[0] === 'function') {

136 console.error(

137 - 'unmount(...): does not support a callback argument. ' +

137 + 'does not support a callback argument. ' +

138 'To execute a side effect after rendering, declare it in a component body with useEffect().',

139 );

140 }

@@ -164,7 +164,7 @@ export function createRoot(

164 options?: CreateRootOptions,

165 ): RootType {

166 if (!isValidContainer(container)) {

167 - throw new Error('createRoot(...): Target container is not a DOM element.');

167 + throw new Error('Target container is not a DOM element.');

168 }

169

170 warnIfReactDOMContainerInDEV(container);

@@ -258,7 +258,7 @@ export function hydrateRoot(

258 options?: HydrateRootOptions,

259 ): RootType {

260 if (!isValidContainer(container)) {

261 - throw new Error('hydrateRoot(...): Target container is not a DOM element.');

261 + throw new Error('Target container is not a DOM element.');

262 }

263

264 warnIfReactDOMContainerInDEV(container);

packages/react-dom/src/test-utils/ReactTestUtils.js

+1 -1

@@ -116,7 +116,7 @@ function validateClassInstance(inst, methodName) {

116 }

117

118 throw new Error(

119 - `${methodName}(...): the first argument must be a React class instance. ` +

119 + `The first argument must be a React class instance. ` +

120 `Instead received: ${received}.`,

121 );

122 }

packages/react-native-renderer/src/legacy-events/EventPluginUtils.js

+2 -2

@@ -23,7 +23,7 @@ export function setComponentTree(

23 if (__DEV__) {

24 if (!getNodeFromInstance || !getInstanceFromNode) {

25 console.error(

26 - 'EventPluginUtils.setComponentTree(...): Injected ' +

26 + 'Injected ' +

27 'module is missing getNodeFromInstance or getInstanceFromNode.',

28 );

29 }

@@ -150,7 +150,7 @@ export function executeDirectDispatch(event) {

150 const dispatchInstance = event._dispatchInstances;

151

152 if (isArray(dispatchListener)) {

153 - throw new Error('executeDirectDispatch(...): Invalid `event`.');

153 + throw new Error('Invalid `event`.');

154 }

155

156 event.currentTarget = dispatchListener

packages/react-native-renderer/src/legacy-events/accumulate.js

+1 -3

@@ -21,9 +21,7 @@ function accumulate<T>(

21 next: T | Array<T>,

22 ): T | Array<T> {

23 if (next == null) {

24 - throw new Error(

25 - 'accumulate(...): Accumulated items must not be null or undefined.',

26 - );

24 + throw new Error('Accumulated items must not be null or undefined.');

25 }

27 if (current == null) {

packages/react-native-renderer/src/legacy-events/accumulateInto.js

+1 -3

@@ -27,9 +27,7 @@ function accumulateInto<T>(

27 next: T | Array<T>,

28 ): T | Array<T> {

29 if (next == null) {

30 - throw new Error(

31 - 'accumulateInto(...): Accumulated items must not be null or undefined.',

32 - );

30 + throw new Error('Accumulated items must not be null or undefined.');

31 }

33 if (current == null) {

packages/react-reconciler/src/ReactFiberBeginWork.js

+2 -1

@@ -1994,7 +1994,8 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {

1994 if (Component) {

1995 if (Component.childContextTypes) {

1996 console.error(

1997 - '%s(...): childContextTypes cannot be defined on a function component.',

1997 + 'childContextTypes cannot be defined on a function component.\n' +

1998 + ' %s.childContextTypes = ...',

1999 Component.displayName || Component.name || 'Component',

2000 );

2001 }

packages/react-reconciler/src/ReactFiberClassComponent.js

+10 -11

@@ -118,18 +118,18 @@ if (__DEV__) {

118 Object.freeze(fakeInternalInstance);

119 }

120

121 -function warnOnInvalidCallback(callback: mixed, callerName: string) {

121 +function warnOnInvalidCallback(callback: mixed) {

122 if (__DEV__) {

123 if (callback === null || typeof callback === 'function') {

124 return;

125 }

126 - const key = callerName + '_' + (callback: any);

126 + // eslint-disable-next-line react-internal/safe-string-coercion

127 + const key = String(callback);

128 if (!didWarnOnInvalidCallback.has(key)) {

129 didWarnOnInvalidCallback.add(key);

130 console.error(

130 - '%s(...): Expected the last optional `callback` argument to be a ' +

131 + 'Expected the last optional `callback` argument to be a ' +

132 'function. Instead received: %s.',

132 - callerName,

133 callback,

134 );

135 }

@@ -202,7 +202,7 @@ const classComponentUpdater = {

202 update.payload = payload;

203 if (callback !== undefined && callback !== null) {

204 if (__DEV__) {

205 - warnOnInvalidCallback(callback, 'setState');

205 + warnOnInvalidCallback(callback);

206 }

207 update.callback = callback;

208 }

@@ -236,7 +236,7 @@ const classComponentUpdater = {

236

237 if (callback !== undefined && callback !== null) {

238 if (__DEV__) {

239 - warnOnInvalidCallback(callback, 'replaceState');

239 + warnOnInvalidCallback(callback);

240 }

241 update.callback = callback;

242 }

@@ -270,7 +270,7 @@ const classComponentUpdater = {

270

271 if (callback !== undefined && callback !== null) {

272 if (__DEV__) {

273 - warnOnInvalidCallback(callback, 'forceUpdate');

273 + warnOnInvalidCallback(callback);

274 }

275 update.callback = callback;

276 }

@@ -359,13 +359,13 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {

359 if (!renderPresent) {

360 if (ctor.prototype && typeof ctor.prototype.render === 'function') {

361 console.error(

362 - '%s(...): No `render` method found on the returned component ' +

362 + 'No `render` method found on the %s ' +

363 'instance: did you accidentally return an object from the constructor?',

364 name,

365 );

366 } else {

367 console.error(

368 - '%s(...): No `render` method found on the returned component ' +

368 + 'No `render` method found on the %s ' +

369 'instance: you may have forgotten to define `render`.',

370 name,

371 );

@@ -504,10 +504,9 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {

504 const hasMutatedProps = instance.props !== newProps;

505 if (instance.props !== undefined && hasMutatedProps) {

506 console.error(

507 - '%s(...): When calling super() in `%s`, make sure to pass ' +

507 + 'When calling super() in `%s`, make sure to pass ' +

508 "up the same props that your component's constructor was passed.",

509 name,

510 - name,

510 );

511 }

512 if (instance.defaultProps) {

packages/react-reconciler/src/ReactFiberReconciler.js

+1 -1

@@ -368,7 +368,7 @@ export function updateContainer(

368 if (__DEV__) {

369 if (typeof callback !== 'function') {

370 console.error(

371 - 'render(...): Expected the last optional `callback` argument to be a ' +

371 + 'Expected the last optional `callback` argument to be a ' +

372 'function. Instead received: %s.',

373 callback,

374 );

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

+1 -1

@@ -678,7 +678,7 @@ describe('ReactLazy', () => {

678 expect(() => {

679 LazyText.defaultProps = {outer: 'Bye'};

680 }).toErrorDev(

681 - 'React.lazy(...): It is not supported to assign `defaultProps` to ' +

681 + 'It is not supported to assign `defaultProps` to ' +

682 'a lazy component import. Either specify them where the component ' +

683 'is defined, or create a wrapping component around it.',

684 {withoutStack: true},

packages/react-server/src/ReactFizzClassComponent.js

+11 -13

@@ -40,18 +40,18 @@ if (__DEV__) {

40 didWarnOnInvalidCallback = new Set<string>();

41 }

43 -function warnOnInvalidCallback(callback: mixed, callerName: string) {

43 +function warnOnInvalidCallback(callback: mixed) {

44 if (__DEV__) {

45 if (callback === null || typeof callback === 'function') {

46 return;

47 }

48 - const key = callerName + '_' + (callback: any);

48 + // eslint-disable-next-line react-internal/safe-string-coercion

49 + const key = String(callback);

50 if (!didWarnOnInvalidCallback.has(key)) {

51 didWarnOnInvalidCallback.add(key);

52 console.error(

52 - '%s(...): Expected the last optional `callback` argument to be a ' +

53 + 'Expected the last optional `callback` argument to be a ' +

54 'function. Instead received: %s.',

54 - callerName,

55 callback,

56 );

57 }

@@ -88,11 +88,10 @@ function warnNoop(

88 }

90 console.error(

91 - '%s(...): Can only update a mounting component. ' +

91 + 'Can only update a mounting component. ' +

92 'This usually means you called %s() outside componentWillMount() on the server. ' +

93 'This is a no-op.\n\nPlease check the code for the %s component.',

94 callerName,

95 - callerName,

95 componentName,

96 );

97 didWarnAboutNoopUpdateForComponent[warningKey] = true;

@@ -117,7 +116,7 @@ const classComponentUpdater = {

116 internals.queue.push(payload);

117 if (__DEV__) {

118 if (callback !== undefined && callback !== null) {

120 - warnOnInvalidCallback(callback, 'setState');

119 + warnOnInvalidCallback(callback);

120 }

121 }

122 }

@@ -128,7 +127,7 @@ const classComponentUpdater = {

127 internals.queue = [payload];

128 if (__DEV__) {

129 if (callback !== undefined && callback !== null) {

131 - warnOnInvalidCallback(callback, 'setState');

130 + warnOnInvalidCallback(callback);

131 }

132 }

133 },

@@ -140,7 +139,7 @@ const classComponentUpdater = {

139 } else {

140 if (__DEV__) {

141 if (callback !== undefined && callback !== null) {

143 - warnOnInvalidCallback(callback, 'setState');

142 + warnOnInvalidCallback(callback);

143 }

144 }

145 }

@@ -318,13 +317,13 @@ function checkClassInstance(instance: any, ctor: any, newProps: any) {

317 if (!renderPresent) {

318 if (ctor.prototype && typeof ctor.prototype.render === 'function') {

319 console.error(

321 - '%s(...): No `render` method found on the returned component ' +

320 + 'No `render` method found on the %s ' +

321 'instance: did you accidentally return an object from the constructor?',

322 name,

323 );

324 } else {

325 console.error(

327 - '%s(...): No `render` method found on the returned component ' +

326 + 'No `render` method found on the %s ' +

327 'instance: you may have forgotten to define `render`.',

328 name,

329 );

@@ -463,10 +462,9 @@ function checkClassInstance(instance: any, ctor: any, newProps: any) {

462 const hasMutatedProps = instance.props !== newProps;

463 if (instance.props !== undefined && hasMutatedProps) {

464 console.error(

466 - '%s(...): When calling super() in `%s`, make sure to pass ' +

465 + 'When calling super() in `%s`, make sure to pass ' +

466 "up the same props that your component's constructor was passed.",

467 name,

469 - name,

468 );

469 }

470 if (instance.defaultProps) {

packages/react-server/src/ReactFizzServer.js

+2 -1

@@ -1591,7 +1591,8 @@ function validateFunctionComponentInDev(Component: any): void {

1591 if (Component) {

1592 if (Component.childContextTypes) {

1593 console.error(

1594 - '%s(...): childContextTypes cannot be defined on a function component.',

1594 + 'childContextTypes cannot be defined on a function component.\n' +

1595 + ' %s.childContextTypes = ...',

1596 Component.displayName || Component.name || 'Component',

1597 );

1598 }

packages/react/src/ReactBaseClasses.js

+1 -1

@@ -60,7 +60,7 @@ Component.prototype.setState = function (partialState, callback) {

60 partialState != null

61 ) {

62 throw new Error(

63 - 'setState(...): takes an object of state variables to update or a ' +

63 + 'takes an object of state variables to update or a ' +

64 'function which returns an object of state variables.',

65 );

66 }

packages/react/src/ReactLazy.js

+2 -2

@@ -148,7 +148,7 @@ export function lazy<T>(

148 // $FlowFixMe[missing-local-annot]

149 set(newDefaultProps) {

150 console.error(

151 - 'React.lazy(...): It is not supported to assign `defaultProps` to ' +

151 + 'It is not supported to assign `defaultProps` to ' +

152 'a lazy component import. Either specify them where the component ' +

153 'is defined, or create a wrapping component around it.',

154 );

@@ -168,7 +168,7 @@ export function lazy<T>(

168 // $FlowFixMe[missing-local-annot]

169 set(newPropTypes) {

170 console.error(

171 - 'React.lazy(...): It is not supported to assign `propTypes` to ' +

171 + 'It is not supported to assign `propTypes` to ' +

172 'a lazy component import. Either specify them where the component ' +

173 'is defined, or create a wrapping component around it.',

174 );

packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee

+4 -4

@@ -56,10 +56,10 @@ describe 'ReactCoffeeScriptClass', ->

56 ).toThrow()

57 ).toErrorDev([

58 # A failed component renders four times in DEV in concurrent mode

59 - 'No `render` method found on the returned component instance',

60 - 'No `render` method found on the returned component instance',

61 - 'No `render` method found on the returned component instance',

62 - 'No `render` method found on the returned component instance',

59 + 'No `render` method found on the Foo instance',

60 + 'No `render` method found on the Foo instance',

61 + 'No `render` method found on the Foo instance',

62 + 'No `render` method found on the Foo instance',

63 ])

65 it 'renders a simple stateless component with prop', ->

packages/react/src/__tests__/ReactES6Class-test.js

+8 -8

@@ -64,14 +64,14 @@ describe('ReactES6Class', () => {

64 expect(() => ReactDOM.flushSync(() => root.render(<Foo />))).toThrow();

65 }).toErrorDev([

66 // A failed component renders four times in DEV in concurrent mode

67 - 'Warning: Foo(...): No `render` method found on the returned component ' +

68 - 'instance: you may have forgotten to define `render`.',

69 - 'Warning: Foo(...): No `render` method found on the returned component ' +

70 - 'instance: you may have forgotten to define `render`.',

71 - 'Warning: Foo(...): No `render` method found on the returned component ' +

72 - 'instance: you may have forgotten to define `render`.',

73 - 'Warning: Foo(...): No `render` method found on the returned component ' +

74 - 'instance: you may have forgotten to define `render`.',

67 + 'Warning: No `render` method found on the Foo instance: ' +

68 + 'you may have forgotten to define `render`.',

69 + 'Warning: No `render` method found on the Foo instance: ' +

70 + 'you may have forgotten to define `render`.',

71 + 'Warning: No `render` method found on the Foo instance: ' +

72 + 'you may have forgotten to define `render`.',

73 + 'Warning: No `render` method found on the Foo instance: ' +

74 + 'you may have forgotten to define `render`.',

75 ]);

76 });

packages/react/src/__tests__/ReactElementClone-test.js

+2 -2

@@ -406,14 +406,14 @@ describe('ReactElementClone', () => {

406 it('throws an error if passed null', () => {

407 const element = null;

408 expect(() => React.cloneElement(element)).toThrow(

409 - 'React.cloneElement(...): The argument must be a React element, but you passed null.',

409 + 'The argument must be a React element, but you passed null.',

410 );

411 });

412

413 it('throws an error if passed undefined', () => {

414 let element;

415 expect(() => React.cloneElement(element)).toThrow(

416 - 'React.cloneElement(...): The argument must be a React element, but you passed undefined.',

416 + 'The argument must be a React element, but you passed undefined.',

417 );

418 });

419 });

packages/react/src/__tests__/ReactTypeScriptClass-test.ts

+8 -8

@@ -334,14 +334,14 @@ describe('ReactTypeScriptClass', function() {

334 ).toThrow();

335 }).toErrorDev([

336 // A failed component renders four times in DEV in concurrent mode

337 - 'Warning: Empty(...): No `render` method found on the returned ' +

338 - 'component instance: you may have forgotten to define `render`.',

339 - 'Warning: Empty(...): No `render` method found on the returned ' +

340 - 'component instance: you may have forgotten to define `render`.',

341 - 'Warning: Empty(...): No `render` method found on the returned ' +

342 - 'component instance: you may have forgotten to define `render`.',

343 - 'Warning: Empty(...): No `render` method found on the returned ' +

344 - 'component instance: you may have forgotten to define `render`.',

337 + 'Warning: No `render` method found on the Empty instance: ' +

338 + 'you may have forgotten to define `render`.',

339 + 'Warning: No `render` method found on the Empty instance: ' +

340 + 'you may have forgotten to define `render`.',

341 + 'Warning: No `render` method found on the Empty instance: ' +

342 + 'you may have forgotten to define `render`.',

343 + 'Warning: No `render` method found on the Empty instance: ' +

344 + 'you may have forgotten to define `render`.',

345 ]);

346 });

347

packages/react/src/__tests__/createReactClassIntegration-test.js

+5 -7

@@ -33,9 +33,7 @@ describe('create-react-class-integration', () => {

33 it('should throw when `render` is not specified', () => {

34 expect(function () {

35 createReactClass({});

36 - }).toThrowError(

37 - 'createClass(...): Class specification must implement a `render` method.',

38 - );

36 + }).toThrowError('Class specification must implement a `render` method.');

37 });

39 it('should copy prop types onto the Constructor', () => {

@@ -218,13 +216,13 @@ describe('create-react-class-integration', () => {

216 },

217 }),

218 ).toErrorDev([

221 - 'createClass(...): `mixins` is now a static property and should ' +

219 + '`mixins` is now a static property and should ' +

220 'be defined inside "statics".',

223 - 'createClass(...): `propTypes` is now a static property and should ' +

221 + '`propTypes` is now a static property and should ' +

222 'be defined inside "statics".',

225 - 'createClass(...): `contextTypes` is now a static property and ' +

223 + '`contextTypes` is now a static property and ' +

224 'should be defined inside "statics".',

227 - 'createClass(...): `childContextTypes` is now a static property and ' +

225 + '`childContextTypes` is now a static property and ' +

226 'should be defined inside "statics".',

227 ]);

228 });

packages/react/src/jsx/ReactJSXElement.js

+1 -1

@@ -832,7 +832,7 @@ export function cloneAndReplaceKey(oldElement, newKey) {

832 export function cloneElement(element, config, children) {

833 if (element === null || element === undefined) {

834 throw new Error(

835 - `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,

835 + `The argument must be a React element, but you passed ${element}.`,

836 );

837 }

838

scripts/error-codes/codes.json

+33 -31

@@ -1,5 +1,5 @@

1 {

2 - "0": "React.addons.createFragment(...): Encountered an invalid child; DOM elements are not valid children of React components.",

2 + "0": "Encountered an invalid child; DOM elements are not valid children of React components.",

3 "1": "update(): expected target of %s to be an array; got %s.",

4 "2": "update(): expected spec of %s to be an array; got %s. Did you forget to wrap your parameter in an array?",

5 "3": "update(): You provided a key path to update() that did not contain one of %s. Did you forget to include {%s: ...}?",

@@ -9,61 +9,61 @@

9 "7": "Expected %s target to be an array; got %s",

10 "8": "update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?",

11 "9": "update(): expected spec of %s to be a function; got %s.",

12 - "10": "findAllInRenderedTree(...): instance must be a composite component",

12 + "10": "instance must be a composite component",

13 "11": "TestUtils.scryRenderedDOMComponentsWithClass expects a className as a second argument.",

14 "12": "ReactShallowRenderer render(): Invalid component element.%s",

15 "13": "ReactShallowRenderer render(): Shallow rendering works only with custom components, not primitives (%s). Instead of calling `.render(el)` and inspecting the rendered output, look at `el.props` directly instead.",

16 "14": "TestUtils.Simulate expects a component instance and not a ReactElement.TestUtils.Simulate will not work if you are using shallow rendering.",

17 - "15": "reactComponentExpect(...): instance must be a composite component",

17 + "15": "instance must be a composite component",

18 "16": "Do not override existing functions.",

19 "17": "All native instances should have a tag.",

20 "18": "Expected a component class, got %s.%s",

21 "19": "Expect a native root tag, instead got %s",

22 "20": "RawText \"%s\" must be wrapped in an explicit <Text> component.",

23 - "21": "findNodeHandle(...): Argument is not a component (type: %s, keys: %s)",

24 - "22": "findNodeHandle(...): Unable to find node handle for unmounted component.",

23 + "21": "Argument is not a component (type: %s, keys: %s)",

24 + "22": "Unable to find node handle for unmounted component.",

25 "23": "onlyChild must be passed a children with exactly one child.",

26 "24": "Mismatched list of contexts in callback queue",

27 "25": "Trying to release an instance into a pool of a different type.",

28 "26": "Unexpected node: %s",

29 - "27": "Transaction.perform(...): Cannot initialize a transaction when there is already an outstanding transaction.",

29 + "27": "Cannot initialize a transaction when there is already an outstanding transaction.",

30 "28": "Transaction.closeAll(): Cannot close transaction when none are open.",

31 - "29": "accumulate(...): Accumulated items must be not be null or undefined.",

32 - "30": "accumulateInto(...): Accumulated items must not be null or undefined.",

31 + "29": "Accumulated items must be not be null or undefined.",

32 + "30": "Accumulated items must not be null or undefined.",

33 "31": "Objects are not valid as a React child (found: %s). If you meant to render a collection of children, use an array instead.",

34 "32": "Unable to find element with ID %s.",

35 "33": "getNodeFromInstance: Invalid argument.",

36 "34": "React DOM tree root should always have a node reference.",

37 "35": "isAncestor: Invalid argument.",

38 "36": "getParentInstance: Invalid argument.",

39 - "37": "_registerComponent(...): Target container is not a DOM element.",

39 + "37": "_Target container is not a DOM element.",

40 "38": "parentComponent must be a valid React Component",

41 "39": "ReactDOM.render(): Invalid component element.%s",

42 - "40": "unmountComponentAtNode(...): Target container is not a DOM element.",

43 - "41": "mountComponentIntoNode(...): Target container is not valid.",

42 + "40": "Target container is not a DOM element.",

43 + "41": "Target container is not valid.",

44 "42": "You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s",

45 "43": "You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering.",

46 "44": "findDOMNode was called on an unmounted component.",

47 "45": "Element appears to be neither ReactComponent nor DOMNode (keys: %s)",

48 "46": "renderToString(): You must pass a valid ReactElement.",

49 "47": "renderToStaticMarkup(): You must pass a valid ReactElement.",

50 - "48": "injectDOMPropertyConfig(...): You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.",

50 + "48": "You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.",

51 "49": "DOMProperty: Properties that have side effects must use property: %s",

52 "50": "DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s",

53 - "51": "dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering.",

54 - "52": "dangerouslyRenderMarkup(...): Missing markup.",

53 + "51": "Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering.",

54 + "52": "Missing markup.",

55 "53": "Danger: Assigning to an already-occupied result index.",

56 "54": "Danger: Did not assign to every index of resultList.",

57 "55": "Danger: Expected markup to render %s nodes, but rendered %s.",

58 - "56": "dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.",

59 - "57": "dangerouslyReplaceNodeWithMarkup(...): Missing markup.",

60 - "58": "dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().",

58 + "56": "Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.",

59 + "57": "Missing markup.",

60 + "58": "Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().",

61 "59": "%s is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`.",

62 "60": "Can only set one of `children` or `props.dangerouslySetInnerHTML`.",

63 "61": "`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://reactjs.org/link/dangerously-set-inner-html for more information.",

64 "62": "The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.",

65 "63": "Must be mounted to trap events",

66 - "64": "trapBubbledEvent(...): Requires node to be rendered.",

66 + "64": "Requires node to be rendered.",

67 "65": "Invalid tag: %s",

68 "66": "<%s> tried to unmount. Because of cross-browser quirks it is impossible to unmount some top-level components (eg <html>, <head>, and <body>) reliably and efficiently. To fix this, have a single top-level component that never unmounts render these elements.",

69 "67": "Missing closing comment for text component %s",

@@ -82,9 +82,9 @@

82 "80": "mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.",

83 "81": "mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",

84 "82": "%s.getInitialState(): must return an object or null",

85 - "83": "createClass(...): Class specification must implement a `render` method.",

85 + "83": "Class specification must implement a `render` method.",

86 "84": "%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",

87 - "85": "setState(...): takes an object of state variables to update or a function which returns an object of state variables.",

87 + "85": "takes an object of state variables to update or a function which returns an object of state variables.",

88 "86": "SimpleEventPlugin: Unhandled event type, `%s`.",

89 "87": "Cannot provide a checkedLink and a valueLink. If you want to use checkedLink, you probably don't want to use valueLink and vice versa.",

90 "88": "Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink.",

@@ -102,9 +102,9 @@

102 "100": "EventPluginRegistry: More than one plugin attempted to publish the same registration name, `%s`.",

103 "101": "EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.",

104 "102": "EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",

105 - "103": "executeDirectDispatch(...): Invalid `event`.",

105 + "103": "Invalid `event`.",

106 "104": "ReactCompositeComponent: injectEnvironment() can only be called once.",

107 - "105": "%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",

107 + "105": "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",

108 "106": "%s.state: must be set to an object or null",

109 "107": "%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().",

110 "108": "%s.getChildContext(): key \"%s\" is not defined in childContextTypes.",

@@ -112,14 +112,14 @@

112 "110": "Stateless function components cannot have refs.",

113 "111": "There is no registered component for the tag %s",

114 "112": "getNextDescendantID(%s, %s): Received an invalid React DOM ID.",

115 - "113": "getNextDescendantID(...): React has made an invalid assumption about the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.",

115 + "113": "React has made an invalid assumption about the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.",

116 "114": "getFirstCommonAncestorID(%s, %s): Expected a valid React DOM ID: %s",

117 - "115": "traverseParentPath(...): Cannot traverse from and to the same ID, `%s`.",

117 + "115": "Cannot traverse from and to the same ID, `%s`.",

118 "116": "traverseParentPath(%s, %s, ...): Cannot traverse from two IDs that do not have a parent path.",

119 "117": "traverseParentPath(%s, %s, ...): Detected an infinite loop while traversing the React DOM ID tree. This may be due to malformed IDs: %s",

120 "118": "updateTextContent called on non-empty component.",

121 - "119": "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 (details: https://reactjs.org/link/refs-must-have-owner).",

122 - "120": "removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing 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://reactjs.org/link/refs-must-have-owner).",

121 + "119": "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://reactjs.org/link/refs-must-have-owner).",

122 + "120": "Only a ReactOwner can have refs. You might be removing 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://reactjs.org/link/refs-must-have-owner).",

123 "121": "performUpdateIfNecessary: Unexpected batch number (current %s, pending %s)",

124 "122": "%s(...): Expected the last optional `callback` argument to be a function. Instead received: %s.",

125 "123": "ReactUpdates: must inject a reconcile transaction class and batching strategy",

@@ -151,7 +151,7 @@

151 "149": "Element ref was specified as a string (%s) but no owner was set. You may have multiple copies of React loaded. (details: https://reactjs.org/link/refs-must-have-owner).",

152 "150": "An object is not an iterable. This error is likely caused by a bug in React. Please file an issue.",

153 "151": "An iterable object provided no iterator.",

154 - "152": "%s(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.",

154 + "152": "Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.",

155 "153": "Resuming work not yet implemented.",

156 "154": "We should always have pending or current props. This error is likely caused by a bug in React. Please file an issue.",

157 "155": "An indeterminate component should never have mounted. This error is likely caused by a bug in React. Please file an issue.",

@@ -264,7 +264,7 @@

264 "264": "An error logging effect should not have been scheduled if no errors were captured. This error is likely caused by a bug in React. Please file an issue.",

265 "265": "This unit of work tag cannot capture errors. This error is likely caused by a bug in React. Please file an issue.",

266 "266": "A subscription must return an unsubscribe function.",

267 - "267": "React.cloneElement(...): The argument must be a React element, but you passed %s.",

267 + "267": "The argument must be a React element, but you passed %s.",

268 "268": "Argument appears to not be a ReactComponent. Keys: %s",

269 "269": "Profiler must specify an \"id\" string and \"onRender\" function as props",

270 "270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",

@@ -293,7 +293,7 @@

293 "295": "ReactDOMServer does not yet support lazy-loaded components.",

294 "297": "The matcher `unstable_toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)",

295 "298": "Hooks can only be called inside the body of a function component.",

296 - "299": "createRoot(...): Target container is not a DOM element.",

296 + "299": "Target container is not a DOM element.",

297 "300": "Rendered fewer hooks than expected. This may be caused by an accidental early return statement.",

298 "301": "Too many re-renders. React limits the number of renders to prevent an infinite loop.",

299 "302": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling",

@@ -326,7 +326,7 @@

326 "331": "Cannot flush passive effects while already rendering.",

327 "332": "Unknown priority level.",

328 "333": "This should have a parent host component initialized. This error is likely caused by a bug in React. Please file an issue.",

329 - "334": "accumulate(...): Accumulated items must not be null or undefined.",

329 + "334": "Accumulated items must not be null or undefined.",

330 "335": "ReactDOMServer does not yet support the event API.",

331 "338": "ReactDOMServer does not yet support the fundamental API.",

332 "340": "Threw in newly mounted dehydrated component. This is likely a bug in React. Please file an issue.",

@@ -491,5 +491,7 @@

491 "503": "Cannot use() an already resolved Client Reference.",

492 "504": "Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.",

493 "505": "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain.",

494 - "506": "Functions are not valid as a child of Client Components. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.%s"

494 + "506": "Functions are not valid as a child of Client Components. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.%s",

495 + "507": "Expected the last optional `callback` argument to be a function. Instead received: %s.",

496 + "508": "The first argument must be a React class instance. Instead received: %s."

497 }