Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration Error: UI Mismatch Between Server and Client #802

Open
Harvey13 opened this issue Dec 17, 2024 · 3 comments
Open

Hydration Error: UI Mismatch Between Server and Client #802

Harvey13 opened this issue Dec 17, 2024 · 3 comments

Comments

@Harvey13
Copy link

Describe the bug

The application throws a hydration error despite the server-rendered HTML and the client-rendered HTML being identical.
This issue occurs during the hydration process and causes the following problems:

  • Warning: Expected server HTML to contain a matching in .
  • Hydration failed because the initial UI does not match what was rendered on the server.

Link to the Bolt URL that caused the error

https://github.com/stackblitz-labs/bolt.diy.git

Steps to reproduce

The server HTML is replaced with client content, leading to rendering inconsistencies.
This happens during tryToClaimNextHydratableInstance in the React reconciliation process.

  1. Run the application in SSR mode (e.g., using remix-run).
  2. Load the application in the browser.
  3. Observe the console errors and warnings.

Expected behavior

No errors : The client-rendered UI should match the server-rendered HTML, allowing smooth hydration without errors.

Screen Recording / Screenshot

No response

Platform

  • OS: Windows 10
  • Browser: Chrome 131.0.6778.140 (Build officiel) (64 bits)
  • Framework: Remix (React)
  • Library: React (@remix-run/react, SSR enabled)
  • Error seen in: chunk-IXC3MVSS.js, hook.js, constants.ts

Provider Used

No response

Model Used

No response

Additional context

The server and client HTML outputs have been verified and are identical, but the hydration process still fails. This suggests a possible issue with how React processes the DOM during hydration.
localhost-1734463122848.log

Potential Causes:

  • React hydration misinterpreting the DOM structure.
  • Timing issues or hidden differences between the server-rendered and client-rendered DOM nodes.
@dustinwloring1988
Copy link
Collaborator

try to clear your cache and if you have a value entered in the env for ollama delete it. Then just set the ollama baseurl in the settings

@Harvey13
Copy link
Author

@dustinwloring1988 Hello, I cleared the cache and
I setup the ollama baseurl
No change still having Hydration error...

@thecodacus
Copy link
Collaborator

there is a mismatch on ModelList constant on server and UI hence the hydration error happens. we will look into this once we have fixed some of the bigger issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants