Cookiebot 脚本导致 NextJs 出现水合错误

问题描述 投票：0回答：1

我有一个 Cookiebot 脚本，我将其包含在我的根布局组件的顶部。

现在，当我最初加载页面时，Cookiebot 横幅会显示并正常工作。但是，如果我没有拒绝或接受，所以不单击任何内容，然后重新加载页面，我会在控制台中收到水合错误，并且 Cookiebot 脚本不再显示。 如果我删除 Cookiebot 脚本，错误就不会再发生。

'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>
    )
}

这些是错误：

  1. 警告：预计服务器 HTML 在 
    <noscript>
    中包含匹配的 
    <div>
    。
  2. 未捕获错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配
  3. 警告：水合过程中发生错误。服务器 HTML 已替换为 
    <#document>
    中的客户端内容。
  4. 未捕获的错误：补水时出现错误。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端渲染。

编辑：

  • 在生产模式下不会发生此错误
next.js cookiebot
1个回答
0
投票

不应使用同步脚本。请参阅：https://nextjs.org/docs/messages/no-sync-scripts

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.