Skip to content

Commit 3722dc7

Browse files
committed
Add a failing test for resolving blocked references of lazy elements
The bug was uncovered after updating React in Next.js in vercel/next.js#66711. The test fails with: ``` TypeError: Cannot read properties of undefined (reading 'children') 1003 | let value = chunk.value; 1004 | for (let i = 1; i < path.length; i++) { > 1005 | value = value[path[i]]; | ^ 1006 | } 1007 | const chunkValue = map(response, value); 1008 | if (__DEV__ && chunk._debugInfo) { at getOutlinedModel (packages/react-client/src/ReactFlightClient.js:1005:26) ```
1 parent b943feb commit 3722dc7

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,75 @@ describe('ReactFlightDOMBrowser', () => {
456456
expect(container.innerHTML).toBe('{}');
457457
});
458458

459+
it('should resolve deduped objects in blocked models referencing other blocked models with blocked references', async () => {
460+
let resolveFooClientComponentChunk;
461+
let resolveBarClientComponentChunk;
462+
463+
function PassthroughServerComponent({children}) {
464+
return children;
465+
}
466+
467+
const FooClient = clientExports(
468+
function FooClient({children}) {
469+
return JSON.stringify(children);
470+
},
471+
'1',
472+
'/foo.js',
473+
new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
474+
);
475+
476+
const BarClient = clientExports(
477+
function BarClient() {
478+
return 'not used';
479+
},
480+
'2',
481+
'/bar.js',
482+
new Promise(resolve => (resolveBarClientComponentChunk = resolve)),
483+
);
484+
485+
const shared = {foo: 1};
486+
487+
function Server() {
488+
return (
489+
<>
490+
<PassthroughServerComponent>
491+
<FooClient key="first" bar={BarClient}>
492+
{shared}
493+
</FooClient>
494+
</PassthroughServerComponent>
495+
<FooClient key="second" bar={BarClient}>
496+
{shared}
497+
</FooClient>
498+
</>
499+
);
500+
}
501+
502+
const stream = await serverAct(() =>
503+
ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
504+
);
505+
506+
function ClientRoot({response}) {
507+
return use(response);
508+
}
509+
510+
const response = ReactServerDOMClient.createFromReadableStream(stream);
511+
const container = document.createElement('div');
512+
const root = ReactDOMClient.createRoot(container);
513+
514+
await act(() => {
515+
root.render(<ClientRoot response={response} />);
516+
});
517+
518+
expect(container.innerHTML).toBe('');
519+
520+
await act(() => {
521+
resolveFooClientComponentChunk();
522+
resolveBarClientComponentChunk();
523+
});
524+
525+
expect(container.innerHTML).toBe('{"foo":1}{"foo":1}');
526+
});
527+
459528
it('should progressively reveal server components', async () => {
460529
let reportedErrors = [];
461530

0 commit comments

Comments
 (0)