Bug Description
When accessing the web interface after a fresh installation, the following error occurs in the browser console:
Uncaught TypeError: crypto.randomUUID is not a function
at 767-*.js:11:52822
This prevents the application from loading and shows: Application error: a client-side exception has occurred
Environment
- ThePopeBot version: 1.2.70, 1.2.71
- Node.js version: 22.22.0
- Next.js version: 15.5.12
- Browser: Chrome, Firefox (tested in multiple browsers)
- Deployment: Docker Compose on Ubuntu 24.04 VPS
Root Cause
The crypto.randomUUID() function is a Node.js API that is being called in a client-side React component. While modern browsers support this API, Next.js compilation or server-side rendering causes it to be undefined in the browser context during initial hydration.
The error occurs in chunk 767-*.js which appears to be part of a client component that runs before the browser's native crypto.randomUUID is available.
Steps to Reproduce
- Fresh install using
npx thepopebot@latest init
- Complete setup wizard with
npm run setup
- Start with
docker compose up -d
- Access the web interface via browser
- Error appears after login
Workaround
Add a polyfill in app/layout.js before any components load:
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<Script id="crypto-polyfill" strategy="beforeInteractive">
{`
if (typeof window !== 'undefined' && !window.crypto.randomUUID) {
window.crypto.randomUUID = function() {
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(//g, c =>[1]
(c ^ crypto.getRandomValues(new Uint8Array(1)) & 15 >> c / 4).toString(16)
);
};
}
`}
</Script>
</head>
<body>
{/* ... */}
</body>
</html>
);
}
Suggested Fix
Use a library like uuid instead of crypto.randomUUID()
Or check if crypto.randomUUID exists before calling it
Or move UUID generation to server-side only components
Additional Notes:
This issue affects versions 1.2.70 and 1.2.71. Earlier versions were not tested. The bug prevents the application from being usable without the workaround.
Bug Description
When accessing the web interface after a fresh installation, the following error occurs in the browser console:
Uncaught TypeError: crypto.randomUUID is not a function
at 767-*.js:11:52822
This prevents the application from loading and shows: Application error: a client-side exception has occurred
Environment
Root Cause
The
crypto.randomUUID()function is a Node.js API that is being called in a client-side React component. While modern browsers support this API, Next.js compilation or server-side rendering causes it to be undefined in the browser context during initial hydration.The error occurs in chunk
767-*.jswhich appears to be part of a client component that runs before the browser's nativecrypto.randomUUIDis available.Steps to Reproduce
npx thepopebot@latest initnpm run setupdocker compose up -dWorkaround
Add a polyfill in
app/layout.jsbefore any components load: