React 18 - hydration of lazy component with sibling fails

[laverdet]

Hello, I'm having an issue with hydration of SSR components using renderToPipeableStream and hydrateRoot. I have a minimum reproduction case here: https://github.com/laverdet/react-issue. Just run npm install; npm start and navigate to localhost:8000.

The error produced follows:

react-dom.development.js:87 Warning: Prop `id` did not match. Server: "async" Client: "after"
    at span
    at Suspense
    at div

The relevant bits of implementation are reproduced below--

app.jsx

const Async = lazy(async () => import('./hot.jsx') });

export const app = <div>
	<Suspense fallback={<div>Loading...</div>}>
		<Async />
		<span id="after">after</span>
	</Suspense>
</div>;

hot.jsx

export default function Async() {
	return <span id="async">async</span>;
}

If I wrap Async directly in a suspense element it will work: <Suspense fallback={null}><Async /></Suspense>

[gaearon]

Can you try turning it into a failing test? You can use this one as a base.

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

Line 238 in 40eaa22

it('should asynchronously load a lazy component', async () => {

[laverdet]

Thanks for the suggestion on how to demonstrate this more clearly for the team. I managed to reproduce in the test environment:
https://github.com/laverdet/react/commit/6ab56221d64732c99db4aab9d5540e9dab1b614b

It happens when the server pushes a resolved lazy component but the client hasn't yet downloaded the component and therefore can't render it. I can observe the same workaround where wrapping the lazy component in its own personal <Suspense /> fixes it.

[gaearon]

Thanks! Can you please send it as a PR? Meaning just the failing test.

[acdlite]

Fixed by #23364

[dominic-p]

I seem to be hitting this same error hydrating an SSR rendered tree with React.lazy components in React 18.1.0.

If the lazy component has siblings I get:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

unless I wrap each component in its own <Suspense> element.

I forked the SSR code sandbox demo and removed the <Suspense> wrapper around the Comments component to reproduce the error:

Old version (reproduces): https://codesandbox.io/s/elastic-oskar-vkc2gm?file=/src/App.js:1283-1339
New version (doens't?): https://codesandbox.io/s/frosty-leftpad-d6o506?file=/src/App.js:1283-1328

I'm still pretty new to Suspense. Is this expected behavior?

Update: It looks like I was using an old version of the demo in my fork. I can't seem to reproduce it with a modern version even though I'm seeing the same behavior on my app. I'll keep trying to reproduce.

Update: Never mind. I missed #24384 until just now. If I use 18.2.0-next-e531a4a62-20220505, the error goes away. Sorry for the noise.

[gaearon]

No prob. Sorry we haven’t released the fix in stable yet.