Next.js Discord

Discord Forum

Hydration Error Caused by Browser Extension

Unanswered
VoidPointer posted this in #help-forum
Open in Discord
I've just started using a new ad blocker, and now I'm getting a new hydration error all over the place in my Payload CMS ecommerce app. I've confirmed it's the ad blocker by disabling it. This is the error:

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up.

The meat of the error trace is:
<RootLayout>
  <html className="assistant_..." lang="en" suppressHydrationWarning={true}>
    <head>
      <InitTheme>
        <Script dangerouslySetInnerHTML={{__html:"\n..."}} id="theme-script" ...>
          <script
            nonce={undefined}
            dangerouslySetInnerHTML={{
+                                   __html: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"\\n  (function ..."
-                                   __html: ""
            }}
-                                 src="chrome-extension://lgblnfidahcdcjddiepkckcfdhpknnjh/content/popups-script.js"
          >

The ad blocker is Stands, but I don't want to worry about specifics. I only see the error with Nextjs dev tools, and it doesn't seem to affect anything yet, but nonetheless it's worrisome. Is there anything I can do to avoid this.

There is an open issue on Github: Bug: Hydration mismatch error due to plugins generating script tag on top
#24430
, but I don't see anything there in comments that is helpful to me.

Everything seems to work fine, though, so it's not a train smash, but I'd like to know if there is anything I can do about this, besides ignore the noisy error message in Next dev tools and console.

0 Replies