I’ve been wrestling with the genesys-cloud-messaging-widget SDK for a few days now. The goal is simple: embed the messenger in a React Next.js application (App Router, Next 14). It works fine in a plain HTML file or a Create React App setup, but as soon as I drop the script tag into a Next.js component, the browser console floods with CORS violations.
The error is specific:
Access to script at 'https://widget.genesyscloud.com/js/messaging-widget.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve tried adding the crossorigin attribute to the script tag, but it doesn’t help. The script fails to load entirely, so genesys.messenger.init never fires.
Here’s the implementation in the Next.js layout:
'use client';
import { useEffect } from 'react';
export default function MessengerWidget() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://widget.genesyscloud.com/js/messaging-widget.js';
script.async = true;
script.defer = true;
script.setAttribute('crossorigin', 'anonymous');
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
}
I’ve also tried loading it via the next/script component with strategy="afterInteractive", same result. The network tab shows a 200 OK for the initial request, but the browser blocks the execution due to the missing CORS header. This feels like a Next.js server-side rendering or streaming issue, but I can’t pin down the exact cause.
Has anyone successfully integrated this widget in a Next.js environment? Any workarounds for the CORS block?