test(react-start): reproduce React 18 hydration error

e2e/react-start/issue-8180-loader/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+test-results
+playwright-report
+port*.txt

e2e/react-start/issue-8180-loader/.prettierignore

@@ -0,0 +1 @@
+src/routeTree.gen.ts

e2e/react-start/issue-8180-loader/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-react-start-e2e-issue-8180-loader",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "vite build && tsc --noEmit",
+    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-start": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.0",
+    "@tanstack/router-e2e-utils": "workspace:*",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "srvx": "^0.11.9",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.0.14"
+  }
+}

e2e/react-start/issue-8180-loader/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+  reporter: [['line']],
+  use: { baseURL },
+  webServer: {
+    command: `VITE_SERVER_PORT=${PORT} pnpm build && NODE_ENV=production PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/react-start/issue-8180-loader/src/routeTree.gen.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

e2e/react-start/issue-8180-loader/src/router.tsx

@@ -0,0 +1,6 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  return createRouter({ routeTree })
+}

e2e/react-start/issue-8180-loader/src/routes/__root.tsx

@@ -0,0 +1,58 @@
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+
+const data = { session: { user: 'test' } }
+
+async function waitForOneMicrotask() {
+  await Promise.resolve()
+  return data
+}
+
+async function waitLonger() {
+  await new Promise((resolve) => setTimeout(resolve, 50))
+  return data
+}
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  shellComponent: RootShell,
+  ssr: false,
+  loader: ({ location }) => {
+    const delay = new URLSearchParams(location.searchStr).get('delay')
+    if (delay === 'microtask') {
+      return waitForOneMicrotask()
+    }
+    if (delay === 'longer') {
+      return waitLonger()
+    }
+    return data
+  },
+})
+
+function RootShell({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+function RootComponent() {
+  return (
+    <main>
+      <h1>Issue 8180 loader</h1>
+      <Outlet />
+    </main>
+  )
+}

e2e/react-start/issue-8180-loader/src/routes/index.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div data-testid="hydrated">Hydrated</div>,
+})

e2e/react-start/issue-8180-loader/tests/app.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+const cases = [
+  { name: 'synchronous loader', path: '/?delay=sync' },
+  { name: 'loader after one microtask', path: '/?delay=microtask' },
+  { name: 'longer asynchronous loader', path: '/?delay=longer' },
+]
+
+for (const testCase of cases) {
+  test(`#8180: ${testCase.name} does not report browser errors during hydration`, async ({
+    page,
+  }) => {
+    const browserErrors: Array<string> = []
+    page.on('console', (message) => {
+      if (message.type() === 'error') {
+        browserErrors.push(message.text())
+      }
+    })
+    page.on('pageerror', (error) => {
+      browserErrors.push(error.message)
+    })
+
+    const response = await page.goto(testCase.path)
+    expect(response?.ok()).toBe(true)
+    await expect(page.getByTestId('hydrated')).toBeVisible()
+
+    expect(browserErrors).toEqual([])
+  })
+}

e2e/react-start/issue-8180-loader/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  }
+}

e2e/react-start/issue-8180-loader/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+    // Keep monorepo packages on this fixture's React 18 runtime.
+    noExternal: ['@tanstack/react-router'],
+    tsconfigPaths: true,
+  },
+  plugins: [tanstackStart(), viteReact()],
+})

e2e/react-start/issue-8180/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+test-results
+playwright-report
+port*.txt

e2e/react-start/issue-8180/.prettierignore

@@ -0,0 +1 @@
+src/routeTree.gen.ts

e2e/react-start/issue-8180/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-react-start-e2e-issue-8180",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "vite build && tsc --noEmit",
+    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-start": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.0",
+    "@tanstack/router-e2e-utils": "workspace:*",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "srvx": "^0.11.9",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.0.14"
+  }
+}

e2e/react-start/issue-8180/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+  reporter: [['line']],
+  use: { baseURL },
+  webServer: {
+    command: `VITE_SERVER_PORT=${PORT} pnpm build && NODE_ENV=production PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})