Unable to nest components in a hydrated component #10792
Description
When running Remix on the server, I want to be able to nest components inside my hydrated component in order to compose components together. This would prove useful for forms and UI elements like accordions. Currently, if a hydrated component is returned to the client that contains either another hydrated component or even just a plain server rendered component, a hydration mismatch error will be thrown in the logs.
Specifically, I see the following in the logs when attempting to render this Demo component: vdom.js:453 Hydration mismatch: excess <div>this is the hydrated sub component</div>
Example:
import { hydrated, type Remix } from "@remix-run/dom";
import { routes } from "../../routes";
export const Demo = hydrated(
routes.assets.href({ path: 'demo.js#Demo' }),
function (this: Remix.Handle) {
console.log('Demo this', this);
return () => {
return (<div>Demo<HydratedSubComponent /></div>);
};
}
)
export const HydratedSubComponent = hydrated(
routes.assets.href({ path: 'demo.js#HydratedSubComponent' }),
function (this: Remix.Handle) {
console.log('HydratedSubComponent this', this);
return () => {
return <div>this is the hydrated sub component</div>;
};
}
)The HTML returned by the server is as follows (excluding the document for brevity):
<!-- rmx:h --><div>Demo<!-- rmx:h --><div>this is the hydrated sub component</div><!-- /rmx:h --><script type="application/json" rmx-hydrated>
{"moduleUrl":"/assets/demo.js","exportName":"HydratedSubComponent","props":{},"id":"h1.1"}
</script></div><!-- /rmx:h --><script type="application/json" rmx-hydrated>
{"moduleUrl":"/assets/demo.js","exportName":"Demo","props":{},"id":"h1"}
This can be easily demonstrated in the bookstore example as well if one tries to nest a component (hydrated or otherwise) in cart-button.tsx.