When attempting to include Usercentrics Cookiebot in my React Next.js app, I encountered an error: "Uncaught Error: Minified React error #418". The banner briefly displays before disappearing.
Here's my initial implementation:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon.svg" />
{isProduction() && (
<script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="<id here>"
data-blockingmode="auto"
type="text/javascript"
></script>
)}
</head>
<body className={`${urbanist.className} flex flex-col`}>
<Providers>
{children}
<Analytics />
</Providers>
{isProduction() && (
<>
<script
id="CookieDeclaration"
src="https://consent.cookiebot.com/<id here>/cd.js"
type="text/javascript"
async
></script>
</>
)}
</body>
</html>
)
}
Additionally, I tried Next.js's recommended approach using next/script:
<Script
src="https://consent.cookiebot.com/uc.js"
id="Cookiebot"
data-cbid="<id here>"
data-blockingmode="auto"
type="text/javascript"
strategy="beforeInteractive"
/>
<Script
src="https://consent.cookiebot.com/<id here>/cd.js"
id="CookieDeclaration"
type="text/javascript"
strategy="afterInteractive"
async
/>
However, this approach led to Cookiebot complaining that the "Cookiebot" ID wasn't set, and https://consent.cookiebot.com/uc.js couldn't be found.
I'm seeking suggestions to resolve this issue. Any insights or guidance would be greatly appreciated. Thank you!