Hydration failed when I use clientLoader with custom basename.

[liuxinqiong]

Reproduction

1. Go to https://stackblitz.com/edit/remix-run-remix-e1pwlj
2. Visit the /sub/cost route
3. See the browser's console, lots of Error: Hydration failed

System Info

System:
    OS: macOS 13.4.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 218.45 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.13.1/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 16.5.2
  npmPackages:
    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/node: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    @remix-run/serve: ^2.9.2 => 2.9.2 
    vite: ^5.1.0 => 5.2.11

Used Package Manager

npm

Expected Behavior

should hydrate without any errors!

Actual Behavior

Oh, it killed lots of my time.

When I use clientLoader+HydrateFallback, hydration always failed, so I try to use remix-development-tools to debug it. the diff is below.

• server side render HydrateFallback component.
• client side render the route component.

So the difference makes hydration failed.

So I try to reproduce in one minimal app, but It works fine. After I compare it carefully, I try to set basename+base in vite config, The error is reproduced.

Can anybody tell me what should I do in this case, thanks a lot!

[brophdawg11]

Thanks for the report! This looks like small bug in initial matching when not in SPA mode - should be fixed by #9584

[github-actions]

🤖 Hello there,

We just published version 2.10.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.10.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!