Fix: React - Use "createRoot" instead of "hydrateRoot" for client:only

.changeset/small-maps-cough.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/react': patch
+---
+
+Fix: remove hydration failures on React v18 by exposing the "client" directive from Astro core.

packages/astro/src/runtime/server/hydration.ts

@@ -110,15 +110,15 @@ export async function generateHydrateScript(
  );
  }
 
- let hydrationSource = ``;
-
- hydrationSource += renderer.clientEntrypoint
+ const hydrationSource = renderer.clientEntrypoint
  ? `const [{ ${
  componentExport.value
  }: Component }, { default: hydrate }] = await Promise.all([import("${await result.resolve(
  componentUrl
  )}"), import("${await result.resolve(renderer.clientEntrypoint)}")]);
- return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children);
+ return (el, children) => hydrate(el)(Component, ${serializeProps(
+ props
+ )}, children, ${JSON.stringify({ client: hydrate })});
 `
  : `await import("${await result.resolve(componentUrl)}");
  return () => {};

packages/integrations/react/client-v17.js

@@ -1,15 +1,18 @@
 import { createElement } from 'react';
-import { hydrate } from 'react-dom';
+import { render, hydrate } from 'react-dom';
 import StaticHtml from './static-html.js';
 
-export default (element) => (Component, props, children) =>
- hydrate(
- createElement(
+export default (element) => (Component, props, children, { client }) =>
+ {
+ const componentEl = createElement(
  Component,
- { ...props, suppressHydrationWarning: true },
+ props,
  children != null
- ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true })
+ ? createElement(StaticHtml, { value: children })
  : children
- ),
- element
- );
+ );
+ if (client === 'only') {
+ return render(componentEl, element);
+ }
+ return hydrate(componentEl, element);
+ };

packages/integrations/react/client.js

@@ -1,15 +1,18 @@
 import { createElement } from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import StaticHtml from './static-html.js';
 
-export default (element) => (Component, props, children) =>
- hydrateRoot(
- element,
- createElement(
+export default (element) => (Component, props, children, { client }) =>
+ {
+ const componentEl = createElement(
  Component,
- { ...props, suppressHydrationWarning: true },
+ props,
  children != null
- ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true })
+ ? createElement(StaticHtml, { value: children })
  : children
- )
- );
+ );
+ if (client === 'only') {
+ return createRoot(element).render(componentEl);
+ }
+ return hydrateRoot(element, componentEl);
+ };