Skip to content

Commit

Permalink
Add a failing test for resolving blocked references of lazy elements
Browse files Browse the repository at this point in the history
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)
```
  • Loading branch information
unstubbable committed Jul 24, 2024
1 parent b943feb commit 3722dc7
Showing 1 changed file with 69 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -456,6 +456,75 @@ describe('ReactFlightDOMBrowser', () => {
expect(container.innerHTML).toBe('{}');
});

it('should resolve deduped objects in blocked models referencing other blocked models with blocked references', async () => {
let resolveFooClientComponentChunk;
let resolveBarClientComponentChunk;

function PassthroughServerComponent({children}) {
return children;
}

const FooClient = clientExports(
function FooClient({children}) {
return JSON.stringify(children);
},
'1',
'/foo.js',
new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
);

const BarClient = clientExports(
function BarClient() {
return 'not used';
},
'2',
'/bar.js',
new Promise(resolve => (resolveBarClientComponentChunk = resolve)),
);

const shared = {foo: 1};

function Server() {
return (
<>
<PassthroughServerComponent>
<FooClient key="first" bar={BarClient}>
{shared}
</FooClient>
</PassthroughServerComponent>
<FooClient key="second" bar={BarClient}>
{shared}
</FooClient>
</>
);
}

const stream = await serverAct(() =>
ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
);

function ClientRoot({response}) {
return use(response);
}

const response = ReactServerDOMClient.createFromReadableStream(stream);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

await act(() => {
root.render(<ClientRoot response={response} />);
});

expect(container.innerHTML).toBe('');

await act(() => {
resolveFooClientComponentChunk();
resolveBarClientComponentChunk();
});

expect(container.innerHTML).toBe('{"foo":1}{"foo":1}');
});

it('should progressively reveal server components', async () => {
let reportedErrors = [];

Expand Down

0 comments on commit 3722dc7

Please sign in to comment.