CODEWITHSUNDEEP
next.jscookiebot
user23455176
user23455176

Reputation:

Cookiebot Script causes Hydration Error in NextJs

I have a Cookiebot Script that i am including at the top of of the in my Root Layout Component.

Now when i am initially loading the page, the Cookiebot Banner shows up and works. But if i am not declining or accepting, so not clicking anything and then reload the page i get an Hydration Error in the console and the Cookiebot Script does not show up anymore. If i remove the Cookiebot Script the Error does not happen anymore.

'use client'

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="COOKIEBOT_ID" type="text/javascript" async></script>
                …the rest of the code
            </head>
        </html>
    )
}

These are the Errors:

  1. Warning: Expected server HTML to contain a matching <noscript> in <div>.
  2. Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server
  3. Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
  4. Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Edit:

Upvotes: 1

Views: 449

Answers (1)

Eli Tref
Eli Tref

Reputation: 142

Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts

Upvotes: -1

Related Questions