How to add JSON object inside script tag in NextJS

I'm trying to set some configuration values within a Cookiebot initialisation script tag in a NextJS project.

The documentation specifies that I can set vendor properties by passing in a JSON object inside the script tag as shown below (taken from https://support.cookiebot.com/hc/en-us/articles/360007652694-Cookiebot-CMP-and-the-Transparency-and-Consent-Framework-TCF#h_01EH49KGTMFNNX4CPJEYJKTZ19):

<script id="CookiebotConfiguration" type="application/json" data-cookieconsent="ignore">
  {
    "Frameworks": {
      "IABTCF2": {
        "AllowedVendors": [2, 6, 8],
        "AllowedGoogleACVendors": [],
        "AllowedPurposes": [1, 2],
        "AllowedSpecialPurposes": [],
        "AllowedFeatures": [1],
        "AllowedSpecialFeatures": [1],
        "VendorRestrictions": [
          {
            "VendorId": 2,
            "DisallowPurposes": [2, 3, 4]
          }
        ]
      }
    }
  }
</script>

When I try to do this in my NextJS app however, I get an error '}' expected.

This is my implementation:

     <Script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="REMOVED" data-blockingmode="auto">
            {
               "Frameworks": {
                   "IABTCF2": {
                       "AllowedVendors": [2, 6, 8],
                       "AllowedGoogleACVendors": [],
                       "AllowedPurposes": [1, 2],
                       "AllowedSpecialPurposes": [],
                       "AllowedFeatures": [1],
                       "AllowedSpecialFeatures": [1],
                        "VendorRestrictions": [
                           {
                               "VendorId": 2,
                               "DisallowPurposes": [2, 3, 4]
                            }
                        ]
                    }
                }
           }
            </Script>

How do I set this JSON object properly without seeing the error?

Thanks,

Ben

EDIT:

As pointed out in the comment, I do need to separate these tags, the syntax error does remain however. The implementation is now:

    <Script id="CookiebotConfiguration" type="application/json" data-cookieconsent="ignore">
        {
            "Frameworks": {
                "IABTCF2": {
                    "AllowedVendors": [2, 6, 8],
                    "AllowedGoogleACVendors": [],
                    "AllowedPurposes": [1, 2],
                    "AllowedSpecialPurposes": [],
                    "AllowedFeatures": [1],
                    "AllowedSpecialFeatures": [1],
                    "VendorRestrictions": [
                        {
                            "VendorId": 2,
                            "DisallowPurposes": [2, 3, 4]
                        }
                    ]
                }
            }
        }
    </Script>

The syntax error below remains, however:

'}' expected.

You're getting a syntax error because you're passing invalid JavaScript inside the {} block in your JSX.

Two things to keep in mind:

1. Anything inside {} blocks inside of JSX is considered JavaScript. In your example you're passing:

"Frameworks": {
    "IABTCF2": {
        "AllowedVendors": [2, 6, 8],
        "AllowedGoogleACVendors": [],
        "AllowedPurposes": [1, 2],
        "AllowedSpecialPurposes": [],
        "AllowedFeatures": [1],
        "AllowedSpecialFeatures": [1],
        "VendorRestrictions": [
            {
                "VendorId": 2,
                "DisallowPurposes": [2, 3, 4]
            }
        ]
    }
}

Which is not valid JavaScript (notice that this whole thing is not an object.

2. Objects are not valid React children. Even if you had passed the correct object inside you'd be getting an error nonetheless.

In your case, you should probably pass this JSON as a string:

<Script id="CookiebotConfiguration" type="application/json" data-cookieconsent="ignore">
    {`
        {
            "Frameworks": {
                "IABTCF2": {
                    "AllowedVendors": [2, 6, 8],
                    "AllowedGoogleACVendors": [],
                    "AllowedPurposes": [1, 2],
                    "AllowedSpecialPurposes": [],
                    "AllowedFeatures": [1],
                    "AllowedSpecialFeatures": [1],
                    "VendorRestrictions": [
                        {
                            "VendorId": 2,
                            "DisallowPurposes": [2, 3, 4]
                        }
                    ]
                }
            }
        }
    `}
</Script>

This works because Next.js's Script tag supports inline scripts.