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

[REF-3165] Warning: Text content did not match. Server: "" Client: "system" #3538

Closed
masenf opened this issue Jun 20, 2024 · 0 comments
Closed
Assignees
Labels
bug Something isn't working

Comments

@masenf
Copy link
Collaborator

masenf commented Jun 20, 2024

Describe the bug
When chakra-ui-color-mode does not match the system mode, nextjs throws a hydration error.

To Reproduce

import reflex as rx


def index() -> rx.Component:
    return rx.text(rx.style.resolved_color_mode)


app = rx.App()
app.add_page(index)

Expected behavior
resolved_color_mode should not cause a hydration error. We should set it to a definitely value for server side rendering, and then update it on the client at runtime.

Setting default resolved_color_mode to the resolvedTheme outside of an effect means that the server and the client will render different a different initial DOM.

Specifics (please complete the following information):

  • Python Version: 3.11.8
  • Reflex Version: main 958c4fa

REF-3165

@masenf masenf added the bug Something isn't working label Jun 20, 2024
@masenf masenf changed the title Warning: Expected server HTML to contain a matching <circle> in <svg>. [REF-3165] Warning: Expected server HTML to contain a matching <circle> in <svg>. Jun 20, 2024
@masenf masenf changed the title [REF-3165] Warning: Expected server HTML to contain a matching <circle> in <svg>. [REF-3165] Warning: Text content did not match. Server: "" Client: "system" Jun 20, 2024
@Lendemor Lendemor self-assigned this Jun 21, 2024
@masenf masenf modified the milestones: v.39, Open Source Bugs Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
@masenf masenf closed this as completed Jun 21, 2024
@masenf masenf reopened this Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants