No hydration if the root loader is using the streaming (deferred data) pattern

[onixmahmoudi]

Reproduction

Go to https://stackblitz.com/edit/remix-run-remix-rmupruck?file=app%2Froot.tsx

the render log and the alerts are not there on the Client side. this is the case easily reproducible, I also have seen a complete duplication of the Outlet in case of a successfully hydration.

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.6.3 => 7.6.3 
    @react-router/node: ^7.6.3 => 7.6.3 
    @react-router/serve: ^7.6.3 => 7.6.3 
    react-router: ^7.6.3 => 7.6.3 
    vite: ^6.0.0 => 6.3.5

Used Package Manager

npm

Expected Behavior

the components should be hydrated without problem

Actual Behavior

some times there is no hydration without any logs and sometimes the whole app gets duplicated

[timdorr]

Does this only occur in the root layout? I would recommend not putting too much logic in there and instead relying on a separate layout route, even if it's applied to your entire app. You can reference the layout's loader data with useRouteLoaderData without having to reference another context.

[onixmahmoudi]

So I played around a bit here https://stackblitz.com/edit/remix-run-remix-mpc7a8ng?file=app%2Froutes.ts
no matter where the loader is, if the AwaitedContext wraps the react router Scripts component it crashes the hydration.