NextJS中在Script标签内添加JSON配置Cookiebot报错解决

核心问题原因 #

你遇到的} expected错误，通常是因为在JSX的Script标签内直接写对象字面量时，被JSX解析器误判为表达式，或者JSON配置的语法不符合规范（比如属性名未加双引号、引号混用导致闭合错误）。

正确实现方式 #

方式1：使用NextJS官方Script组件（推荐） #

利用模板字符串包裹脚本内容，避免JSX解析冲突，同时严格遵循JSON语法规范：

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script id="Cookiebot" strategy="afterInteractive">
        {`
          // 初始化Cookiebot配置
          window.cookiebotConfig = {
            consentId: '你的Consent ID',
            // 厂商属性配置，注意属性名必须用双引号
            vendors: {
              "vendor_example_1": {
                "purpose": ["analytics"]
              },
              "vendor_example_2": {
                "purpose": ["marketing"],
                "legitimateInterest": true
              }
            }
          };

          // 加载Cookiebot核心脚本
          (function(){
            var loadScript = function(){
              var script = document.createElement("script");
              script.type = "text/javascript";
              script.async = true;
              script.src = "https://consent.cookiebot.com/uc.js?cbid=你的CBID";
              var firstScript = document.getElementsByTagName("script")[0];
              firstScript.parentNode.insertBefore(script, firstScript);
            };
            window.addEventListener ? window.addEventListener("load", loadScript, false) : 
            window.attachEvent ? window.attachEvent("onload", loadScript) : window.onload = loadScript;
          })();
        `}
      </Script>
      <Component {...pageProps} />
    </>
  );
}

方式2：在自定义Document中插入原生Script标签 #

如果需要在HTML头部加载，可在_document.js中实现：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script id="Cookiebot-config" type="text/javascript">
            {`
              window.cookiebotConfig = {
                consentId: '你的Consent ID',
                vendors: {
                  "vendor_example": {
                    "purpose": ["functional"]
                  }
                }
              };
            `}
          </script>
          <script 
            src="https://consent.cookiebot.com/uc.js?cbid=你的CBID" 
            type="text/javascript" 
            async
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

关键注意事项 #

• 所有内联脚本内容必须用**模板字符串（``）**包裹，防止JSX将{}解析为组件表达式
• 配置对象的属性名必须用双引号，严格符合JSON语法规范（Cookiebot初始化脚本要求正确的JSON格式）
• 避免引号混用：字符串值可使用单引号，或在双引号内转义（模板字符串内无需转义双引号）
• 拆分脚本时，确保每个代码块都完整包裹在模板字符串中，不要出现未闭合的括号或引号

内容的提问来源于stack exchange，提问作者0Neji