Enabling RSC in framework mode breaks hydration

[t0mhaines]

Reproduction

https://stackblitz.com/edit/github-gvrt8fmp

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: 7.9.5 => 7.9.5 
    @react-router/serve: 7.9.5 => 7.9.5 
    react-router: 7.9.5 => 7.9.5 
    vite: 7.1.12 => 7.1.12

Used Package Manager

npm

Expected Behavior

Creating a fresh RR framework project using the template, then following the guide, should render the "Hello, React Router" page.

Actual Behavior

The page correctly renders initially, then crashes during hydration

Error: You must render this element inside a <HydratedRouter> element
    at invariant2 (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-6ERU35KH.js?v=30a4bbbf:7412:11)
    at useFrameworkContext (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-6ERU35KH.js?v=30a4bbbf:8754:3)
    at Meta (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-6ERU35KH.js?v=30a4bbbf:8975:37)
    at Object.react_stack_bottom_frame (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:18509:20)
    at renderWithHooks (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:5654:24)
    at updateFunctionComponent (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:7475:21)
    at beginWork (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:8525:20)
    at runWithFiberInDEV (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:997:72)
    at performUnitOfWork (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:12561:98)
    at workLoopSync (https://rlmikjrrjlgithub-tujo--5173--cf284e50.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=30a4bbbf:12424:43)

Refreshing the page seems to break the server completely, as the server does not return any data.

[timdorr]

This looks to be related to #14457. If I downgrade to 7.9.4, it works just fine. The context instance is different for the DOM export from react-router.

[hi-ogawa]

With framework mode's default entry, react-router/dom is not optimized. This probably needs to be avoided by manually adding optimizeDeps.include https://stackblitz.com/edit/github-gvrt8fmp-gszhrgzf?file=vite.config.ts

export default defineConfig({
  plugins: [
    tailwindcss(),
    tsconfigPaths(),
    reactRouterRSC(),
    rsc(),
    devtoolsJson(),
  ],
  optimizeDeps: {
    include: ['react-router/dom'],
  },
});