diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index dcdceb7a60dbd..6343d08ebbc89 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -244,7 +244,8 @@ export function createTextInstance( ): TextInstance { invariant( hostContext.isInAParentText, - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: %s', + text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text, ); const tag = nextReactTag; diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 0369755c136a0..bd5822a783fb9 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js @@ -146,7 +146,8 @@ export function createTextInstance( ): TextInstance { invariant( hostContext.isInAParentText, - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: %s', + text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text, ); const tag = allocateTag(); diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index 026c3b4d38d89..03d961577c6e7 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -563,7 +563,15 @@ describe('ReactFabric', () => { })); expect(() => ReactFabric.render(this should warn, 11)).toThrow( - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: this should warn', + ); + + expect(() => + ReactFabric.render({'x'.repeat(200)}, 11), + ).toThrow( + `Text string must be rendered within a component.\n\nText: ${'x'.repeat( + 88, + )} (truncated)`, ); expect(() => @@ -573,7 +581,9 @@ describe('ReactFabric', () => { , 11, ), - ).toThrow('Text strings must be rendered within a component.'); + ).toThrow( + 'Text string must be rendered within a component.\n\nText: hi hello hi', + ); }); it('should not throw for text inside of an indirect ancestor', () => { diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index 894d4c8aa134f..eddd30b62a20a 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -423,7 +423,15 @@ describe('ReactNative', () => { })); expect(() => ReactNative.render(this should warn, 11)).toThrow( - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: this should warn', + ); + + expect(() => + ReactNative.render({'x'.repeat(200)}, 11), + ).toThrow( + `Text string must be rendered within a component.\n\nText: ${'x'.repeat( + 88, + )} (truncated)`, ); expect(() => @@ -433,7 +441,9 @@ describe('ReactNative', () => { , 11, ), - ).toThrow('Text strings must be rendered within a component.'); + ).toThrow( + 'Text string must be rendered within a component.\n\nText: hi hello hi', + ); }); it('should not throw for text inside of an indirect ancestor', () => { diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 540655e24c608..9498d6e5ed3b1 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -254,7 +254,6 @@ "253": "work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.", "254": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a functional component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://reactjs.org/link/refs-must-have-owner for more information.", "255": "Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.", - "256": "Expected ReactFiberErrorDialog.showErrorDialog to be a function.", "257": "Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.", "258": "Unknown element-like object type: %s. This is likely a bug in React. Please file an issue.", "259": "The experimental Call and Return types are not currently supported by the server renderer.", @@ -270,7 +269,6 @@ "269": "Profiler must specify an \"id\" string and \"onRender\" function as props", "270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.", "271": "Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.", - "272": "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue.", "273": "Nesting of within is not currently supported.", "274": "Text strings must be rendered within a component.", "275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.", @@ -361,5 +359,6 @@ "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.", "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.", "369": "ReactDOM.createEventHandle: setter called on an invalid target. Provide a valid EventTarget or an element managed by React.", - "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function." + "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function.", + "371": "Text string must be rendered within a component.\n\nText: %s" }