test(rsc): check hydration mismatch

packages/plugin-rsc/e2e/basic.test.ts

@@ -5,6 +5,7 @@
 import { expectNoReload, testNoJs, waitForHydration } from './helper'
 
 // TODO: parallel?
+// TODO: all tests don't need to be tested in all variants?
 
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/basic', mode: 'dev' })
@@ -429,7 +430,7 @@
           `/* color: rgb(0, 165, 255); */`,
         ),
       )
       await expect(page.locator('.test-style-server')).toHaveCSS(
         'color',
         'rgb(0, 0, 0)',
       )
@@ -627,7 +628,7 @@
       const res = await page.request.get(f.url('/__test_restart'))
       expect(await res.text()).toBe('ok')
       await new Promise((r) => setTimeout(r, 100))
       await page.goto(f.url('./'))
       await testCss(page)
       await testTailwind(page)
     })
@@ -928,4 +929,27 @@
       '(actionCount: 5, innerFnCount: 3)',
     )
   })
+
+  test('hydration mismatch', async ({ page }) => {
+    const errors: Error[] = []
+    page.on('pageerror', (error) => {
+      errors.push(error)
+    })
+    await page.goto(f.url('/?test-hydration-mismatch'))
+    await waitForHydration(page)
+    expect(errors).toMatchObject([
+      {
+        message: expect.stringContaining(
+          f.mode === 'dev'
+            ? `Hydration failed because the server rendered HTML didn't match the client.`
+            : `Minified React error #418`,
+        ),
+      },
+    ])
+
+    errors.length = 0
+    await page.goto(f.url())
+    await waitForHydration(page)
+    expect(errors).toEqual([])
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/hydration-mismatch/client.tsx

@@ -0,0 +1,6 @@
+'use client'
+
+export function Mismatch() {
+  const value = typeof window !== 'undefined' ? 'browser' : 'ssr'
+  return <>[{value}]</>
+}

packages/plugin-rsc/examples/basic/src/routes/hydration-mismatch/server.tsx

@@ -0,0 +1,16 @@
+import { Mismatch } from './client'
+
+export function TestHydrationMismatch(props: { url: URL }) {
+  const show = props.url.searchParams.has('test-hydration-mismatch')
+  return (
+    <div>
+      <span>test-hydration-mismatch</span>{' '}
+      {show ? (
+        <a href="?">hide</a>
+      ) : (
+        <a href="?test-hydration-mismatch">show</a>
+      )}{' '}
+      {show && <Mismatch />}
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -27,6 +27,7 @@ import { TestTailwindClient } from './tailwind/client'
 import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
+import { TestHydrationMismatch } from './hydration-mismatch/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -47,6 +48,7 @@ export function Root(props: { url: URL }) {
         <TestCssClientNoSsr url={props.url} />
         <TestTailwindClient />
         <TestTailwindServer />
+        <TestHydrationMismatch url={props.url} />
         <TestHmrClientDep />
         <TestTemporaryReference />
         <TestServerActionError />

packages/plugin-rsc/examples/basic/src/styles.css

@@ -9,5 +9,5 @@ input {
 }
 
 a {
-  @apply text-gray-500 underline hover:text-gray-700;
+  @apply text-gray-500 underline hover:text-gray-700 cursor-pointer;
 }

packages/plugin-rsc/package.json

@@ -34,8 +34,7 @@
     "tsc": "tsc -b ./tsconfig.json ./e2e/tsconfig.json ./examples/*/tsconfig.json",
     "tsc-dev": "pnpm tsc --watch --preserveWatchOutput",
     "dev": "tsdown --sourcemap --watch src",
-    "build": "tsdown",
-    "prepack": "tsdown --clean"
+    "build": "tsdown"
   },
   "dependencies": {
     "@mjackson/node-fetch-server": "^0.6.1",