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.

Sign up for GitHub

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

Jump to bottom

Browser extension causes Hydration Error #3689

Open
YerayMnopi opened this issue Mar 7, 2025 · 2 comments
Open

Browser extension causes Hydration Error #3689

YerayMnopi opened this issue Mar 7, 2025 · 2 comments

Comments

@YerayMnopi
Copy link

Which project does this relate to?

Start

Describe the bug

A hydration error arises when users activate extensions that modify the HTML, like Grammarly.

There is a tweet from @tannerlinsley explaining how he solved this.

While not my favorite solution, it totally works and is easily encapsulated into TanStack Router/Start's APIs.

Shouldn't this error already be handled by Tanstack start? The app styles break when this error occurs

Thanks

Your Example Website or App

https://github.com/YerayMnopi/tanstack-start-browser-extension-hydration-error

Steps to Reproduce the Bug or Issue

  1. Create a tanstack start app
  2. Run app
  3. Activate Grammarly browser extension
  4. Reload

Expected behavior

As a user, I expect to be able to use browser extensions on apps that use tantstack start.

Screenshots or Videos

Image

Image

Platform

  • OS: macOS 14.7.4 (23H420)
  • Browser: Version 133.0.6943.142 (Official Build) (arm64)
  • Version: 1.112.19

Additional context

No response
@tannerlinsley
Copy link
Collaborator

The error will still log no matter what, this is how React works. Is the app broken afterwards though? It should fall back to client-side rendering to fix the hydration error.

@SelfhostedPro
Copy link

You need to add suppressHydrationWarning to the element that's being modified by a browser extension.
That will remove the warning. Usually it doesn't actually have an affect on things outside of the ugly error.

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>                                          vvvvvvvvvvvvvvvvvvvvvvv
      <body className="antialiased" suppressHydrationWarning>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tannerlinsley @YerayMnopi @SelfhostedPro