Running into a wall with the Web Messaging SDK in a Next.js 14 project using the App Router. The widget loads fine in dev mode, but as soon as I build for production, the initial handshake to the Genesys Cloud API fails with a CORS error. The browser console is spitting out a 403 Forbidden on the OPTIONS preflight request to https://api.mypurecloud.com/api/v2/webchat/sessions.
Here’s the initialization code in my layout.tsx:
import { Messenger } from '@genesyscloud/messenger-web-sdk';
export default function RootLayout({ children }: { children: React.ReactNode }) {
useEffect(() => {
const messenger = new Messenger({
orgId: 'my-org-id',
appId: 'my-app-id',
locale: 'en-US',
});
messenger.start();
}, []);
return <html>{children}</html>;
}
The weird part is that the same config works perfectly in a plain Create React App setup. I’ve checked the response headers from Genesys Cloud, and Access-Control-Allow-Origin is set to *. Since Next.js server components are involved, could the hydration be triggering the request before the client-side SDK is fully ready? Or is there a specific Next.js config I’m missing for handling these third-party script injections? The network tab shows the request is coming from localhost:3000 in dev, but the origin changes to the production domain in prod, which might be triggering stricter checks. No idea where to look next.