fix: hydration error with useId (#1109)

close #1100 - [x] add failing test - [x] fix it
dai-shi · Dec 31, 2024 · 67775de · 67775de
1 parent 57b7232
commit 67775de
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 23 deletions.
diff --git a/e2e/fixtures/ssr-basic/src/components/Counter.tsx b/e2e/fixtures/ssr-basic/src/components/Counter.tsx
@@ -1,16 +1,21 @@
 'use client';
 
-import { useState } from 'react';
+import { useId, useState } from 'react';
 
 export const Counter = () => {
   const [count, setCount] = useState(0);
+  const id = useId();
   return (
     <div
       data-testid="counter"
       style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}
     >
       <p data-testid="count">{count}</p>
-      <button data-testid="increment" onClick={() => setCount((c) => c + 1)}>
+      <button
+        id={id}
+        data-testid="increment"
+        onClick={() => setCount((c) => c + 1)}
+      >
         Increment
       </button>
     </div>

diff --git a/e2e/ssr-basic.spec.ts b/e2e/ssr-basic.spec.ts
@@ -58,5 +58,17 @@ for (const mode of ['DEV', 'PRD'] as const) {
       await page.close();
       await context.close();
     });
+
+    test('check hydration error', async ({ page }) => {
+      test.skip(mode !== 'DEV');
+      const messages: string[] = [];
+      page.on('console', (msg) => messages.push(msg.text()));
+      await page.goto(`http://localhost:${port}/`);
+      await expect(page.getByTestId('app-name')).toHaveText('Waku');
+      await expect(page.getByTestId('count')).toHaveText('0');
+      await page.getByTestId('increment').click();
+      await expect(page.getByTestId('count')).toHaveText('1');
+      expect(messages.join('\n')).not.toContain('hydration-mismatch');
+    });
   });
 }
diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts
@@ -2,13 +2,6 @@ import type { Plugin } from 'vite';
 
 import { SRC_MAIN } from '../constants.js';
 
-// This should be consistent with the one in renderers/html.ts
-const DEFAULT_HTML_HEAD = `
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="generator" content="Waku" />
-`.trim();
-
 export function rscIndexPlugin(opts: {
   basePath: string;
   srcDir: string;
@@ -19,7 +12,6 @@ export function rscIndexPlugin(opts: {
 <!doctype html>
 <html>
   <head>
-${DEFAULT_HTML_HEAD}
   </head>
   <body>
     <script src="${opts.basePath}${opts.srcDir}/${SRC_MAIN}" async type="module"></script>

diff --git a/packages/waku/src/lib/renderers/html.ts b/packages/waku/src/lib/renderers/html.ts
@@ -14,16 +14,6 @@ import { renderRsc, renderRscElement, getExtractFormState } from './rsc.js';
 // TODO move types somewhere
 import type { HandlerContext } from '../middleware/types.js';
 
-// This should be consistent with the one in vite-plugin-rsc-index.ts
-const DEFAULT_HTML_HEAD = [
-  createElement('meta', { charSet: 'utf-8' }),
-  createElement('meta', {
-    name: 'viewport',
-    content: 'width=device-width, initial-scale=1',
-  }),
-  createElement('meta', { name: 'generator', content: 'Waku' }),
-];
-
 type Elements = Record<string, ReactNode>;
 
 const fakeFetchCode = `
@@ -229,7 +219,6 @@ export async function renderHtml(
         Omit<ComponentProps<typeof ServerRoot>, 'children'>
       >,
       { elements: elementsPromise },
-      ...DEFAULT_HTML_HEAD,
       htmlNode as any,
     ),
     {

diff --git a/packages/waku/src/minimal/client.ts b/packages/waku/src/minimal/client.ts
@@ -24,6 +24,15 @@ declare global {
   }
 }
 
+const DEFAULT_HTML_HEAD = [
+  createElement('meta', { charSet: 'utf-8' }),
+  createElement('meta', {
+    name: 'viewport',
+    content: 'width=device-width, initial-scale=1',
+  }),
+  createElement('meta', { name: 'generator', content: 'Waku' }),
+];
+
 const BASE_PATH = `${import.meta.env?.WAKU_CONFIG_BASE_PATH}${
   import.meta.env?.WAKU_CONFIG_RSC_BASE
 }/`;
@@ -231,7 +240,12 @@ export const Root = ({
   return createElement(
     RefetchContext.Provider,
     { value: refetch },
-    createElement(ElementsContext.Provider, { value: elements }, children),
+    createElement(
+      ElementsContext.Provider,
+      { value: elements },
+      ...DEFAULT_HTML_HEAD,
+      children,
+    ),
   );
 };
 
@@ -376,4 +390,10 @@ export const ServerRootInternal = ({
 }: {
   elements: Elements;
   children: ReactNode;
-}) => createElement(ElementsContext.Provider, { value: elements }, children);
+}) =>
+  createElement(
+    ElementsContext.Provider,
+    { value: elements },
+    ...DEFAULT_HTML_HEAD,
+    children,
+  );