diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index b4a07239296..fb4404200d8 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -2812,7 +2812,7 @@ describe('ReactFlight', () => { transport: expect.arrayContaining([]), }, }, - {time: gate(flags => flags.enableAsyncDebugInfo) ? 53 : 21}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 55 : 21}, ] : undefined, ); @@ -2822,7 +2822,7 @@ describe('ReactFlight', () => { expect(getDebugInfo(await thirdPartyChildren[0])).toEqual( __DEV__ ? [ - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, // Clamped to the start { name: 'ThirdPartyComponent', env: 'third-party', @@ -2830,15 +2830,15 @@ describe('ReactFlight', () => { stack: ' in Object. (at **)', props: {}, }, - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, - {time: gate(flags => flags.enableAsyncDebugInfo) ? 55 : 23}, // This last one is when the promise resolved into the first party. + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 57 : 23}, // This last one is when the promise resolved into the first party. ] : undefined, ); expect(getDebugInfo(thirdPartyChildren[1])).toEqual( __DEV__ ? [ - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, // Clamped to the start { name: 'ThirdPartyLazyComponent', env: 'third-party', @@ -2846,14 +2846,14 @@ describe('ReactFlight', () => { stack: ' in myLazy (at **)\n in lazyInitializer (at **)', props: {}, }, - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, ] : undefined, ); expect(getDebugInfo(thirdPartyChildren[2])).toEqual( __DEV__ ? [ - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, { name: 'ThirdPartyFragmentComponent', env: 'third-party', @@ -2861,7 +2861,7 @@ describe('ReactFlight', () => { stack: ' in Object. (at **)', props: {}, }, - {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, ] : undefined, ); @@ -2936,7 +2936,7 @@ describe('ReactFlight', () => { transport: expect.arrayContaining([]), }, }, - {time: 31}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 33 : 17}, ] : undefined, ); @@ -2944,7 +2944,7 @@ describe('ReactFlight', () => { expect(getDebugInfo(thirdPartyFragment)).toEqual( __DEV__ ? [ - {time: 32}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 34 : 18}, { name: 'Keyed', env: 'Server', @@ -2954,7 +2954,7 @@ describe('ReactFlight', () => { children: {}, }, }, - {time: 33}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19}, ] : undefined, ); @@ -2962,7 +2962,7 @@ describe('ReactFlight', () => { expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual( __DEV__ ? [ - {time: 33}, // Clamp to the start + {time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19}, // Clamp to the start { name: 'ThirdPartyAsyncIterableComponent', env: 'third-party', @@ -2970,7 +2970,7 @@ describe('ReactFlight', () => { stack: ' in Object. (at **)', props: {}, }, - {time: 33}, + {time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19}, ] : undefined, ); @@ -3901,6 +3901,40 @@ describe('ReactFlight', () => { ); }); + it('does not crash when exporting a JSX element as a client reference', async () => { + const ClientReference = clientReference(React.createElement('div')); + + function App() { + return ClientReference; + } + + const transport = ReactNoopFlightServer.render({ + root: ReactServer.createElement(App), + }); + + await act(async () => { + const {root} = await ReactNoopFlightClient.read(transport); + ReactNoop.render(root); + if (__DEV__) { + expect(getDebugInfo(root)).toEqual([ + { + time: 12, + }, + { + env: 'Server', + key: null, + name: 'App', + props: {}, + stack: ' in Object. (at **)', + }, + { + time: 13, + }, + ]); + } + }); + }); + // @gate enableOptimisticKey it('collapses optimistic keys to an optimistic key', async () => { function Bar({text}) { diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index 412ec0c9ca7..29b14661104 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -2905,7 +2905,7 @@ describe('ReactFlightDOMBrowser', () => { "Object.", "/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js", 2826, - 19, + 17, 2810, 89, ], diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index 995f0da37ec..7569613c9f7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -499,8 +499,7 @@ describe('ReactFlightDOMEdge', () => { }, }, ); - // TODO: Cyclic references currently cause a Lazy wrapper which is not ideal. - const resultElement = result.root._init(result.root._payload); + const resultElement = result.root; // Should still match the result when parsed expect(resultElement).toEqual(props.root); expect(resultElement.props.children[5]).toBe( @@ -702,7 +701,7 @@ describe('ReactFlightDOMEdge', () => { const [stream2, drip] = dripStream(stream); // Allow some of the content through. - drip(__DEV__ ? 7500 : 5000); + drip(__DEV__ ? 30000 : 5000); const result = await ReactServerDOMClient.createFromReadableStream( stream2, diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 2570c0d12e2..3655bedfd76 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -626,7 +626,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 589, - 40, + 38, 570, 49, ], @@ -658,7 +658,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 589, - 40, + 38, 570, 49, ], @@ -714,7 +714,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 589, - 40, + 38, 570, 49, ], @@ -784,7 +784,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 589, - 40, + 38, 570, 49, ], @@ -1218,7 +1218,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 93, - 40, + 38, 91, 3, ], @@ -1250,7 +1250,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 93, - 40, + 38, 91, 3, ], @@ -1306,7 +1306,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 93, - 40, + 38, 91, 3, ], @@ -1360,7 +1360,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 93, - 40, + 38, 91, 3, ], @@ -1416,7 +1416,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 93, - 40, + 38, 91, 3, ], @@ -1545,7 +1545,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1508, - 40, + 38, 1491, 62, ], @@ -1577,7 +1577,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1508, - 40, + 38, 1491, 62, ], @@ -1633,7 +1633,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1508, - 40, + 38, 1491, 62, ], @@ -1706,7 +1706,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1508, - 40, + 38, 1491, 62, ], @@ -1858,7 +1858,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1821, - 40, + 38, 1805, 57, ], @@ -1890,7 +1890,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1821, - 40, + 38, 1805, 57, ], @@ -1946,7 +1946,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1821, - 40, + 38, 1805, 57, ], @@ -2016,7 +2016,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 1821, - 40, + 38, 1805, 57, ], @@ -2154,7 +2154,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2186,7 +2186,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2242,7 +2242,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2293,7 +2293,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2357,7 +2357,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2416,7 +2416,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2464,7 +2464,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2117, - 40, + 38, 2099, 80, ], @@ -2730,7 +2730,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2693, - 40, + 38, 2681, 56, ], @@ -2762,7 +2762,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2693, - 40, + 38, 2681, 56, ], @@ -2810,7 +2810,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2693, - 40, + 38, 2681, 56, ], @@ -2924,7 +2924,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2882, - 40, + 38, 2861, 42, ], @@ -2956,7 +2956,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2882, - 40, + 38, 2861, 42, ], @@ -3004,7 +3004,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2882, - 40, + 38, 2861, 42, ], @@ -3055,7 +3055,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2882, - 40, + 38, 2861, 42, ], @@ -3095,7 +3095,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 2882, - 40, + 38, 2861, 42, ], @@ -3192,7 +3192,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 3158, - 19, + 17, 3146, 36, ], @@ -3216,7 +3216,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 3158, - 19, + 17, 3146, 36, ], @@ -3248,7 +3248,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", 3158, - 19, + 17, 3146, 36, ], diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js index 3a5a5d51a9b..b2cd87785a9 100644 --- a/packages/react/src/jsx/ReactJSXElement.js +++ b/packages/react/src/jsx/ReactJSXElement.js @@ -259,7 +259,7 @@ function ReactElement(type, key, props, owner, debugStack, debugTask) { configurable: false, enumerable: false, writable: true, - value: null, + value: [], }); Object.defineProperty(element, '_debugStack', { configurable: false,