Stuck on this for two days. Trying to drop the Genesys Cloud Messenger widget into a Next.js 14 app using the App Router. It renders fine in dev, but as soon as I hit the production build or even run next start, the widget throws a CORS error when trying to fetch the initial config from the platform API. The browser console screams about Access-Control-Allow-Origin missing on https://api.mypurecloud.com/api/v2/organizations.
I’ve checked the Genesys UI settings, added the production domain to the allowed origins list, cleared cache, everything. The weird part is the error happens before the widget even initializes visually. It feels like the fetch is being blocked by the browser security policy because of how Next.js handles static asset serving or maybe the way the SDK is bundled.
Here is the basic component wrapper I’m using. Nothing fancy, just following the docs:
import { useEffect, useState } from 'react';
export default function MessengerWidget() {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://mypurecloud.com/embeddable/messenger.js';
script.async = true;
script.onload = () => {
// Initialize widget with org ID and widget ID
window.GenesysCloudMessenger.init({
orgGuid: 'my-org-guid',
widgetGuid: 'my-widget-guid'
});
setIsLoaded(true);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return <div id="genesys-messenger-container" />;
}
The error stack points to fetch inside messenger.js. I’ve tried setting next.config.js rewrites to proxy the API calls, but the widget code is hardcoded to call the Genesys domain directly. No way to intercept that. Is this a known issue with the App Router? Or am I missing a header in the Next.js middleware? The widget just spins forever. No error popup, just dead air.
Checked the network tab, the request to api.mypurecloud.com gets a 200 OK but the browser blocks it due to CORS. The response headers from Genesys look correct, they include Access-Control-Allow-Origin: *. But the browser still complains. It’s like the preflight check is failing silently or something.
Anyone else hit this wall with Next.js 14? Feels like a dead end. Just want the chat bubble to show up without fighting the browser.