So suddenly my next.js page just went blank, after a brief second, I didn't change anything, it just happened. I tried to restart my dev server and deleted the '.next' folder, nothing worked. At least I got some errors in the console. I guess the page is blank, because of some error server-side, but these errors couldn't help me. Btw my page is using "use client";
EDIT: I found the error, it was not a Next.js error (who would thought), a mistake from my side, I imported a exported function, from a file, that imported some files, that not work client-side.
It's also not a browser specific error, I tried Chrome and Edge, same results.
Only on the '/login' page, I get the below errors, on my register or one time password verification page (both using "use client"), I get no errors, but all pages are blank.
And in the network tab, I don't get any 404 errors. And I get the same errors in production (deployed to vercel).
Here is my package.json:
{
"name": "bazcord",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "prisma generate && next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
},
"dependencies": {
"@auth/prisma-adapter": "^1.5.1",
"@hookform/resolvers": "^3.3.4",
"@nextui-org/input": "^2.1.17",
"@prisma/client": "5.10.2",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@tanstack/react-query": "^5.28.4",
"@types/uuid": "^9.0.8",
"@uploadthing/react": "^6.3.4",
"@upstash/redis": "^1.28.4",
"axios": "^1.6.7",
"bcryptjs": "^2.4.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"input-otp": "^1.2.3",
"lucide-react": "^0.354.0",
"next": "14.1.3",
"next-auth": "5.0.0-beta.16",
"next-themes": "^0.2.1",
"query-string": "^9.0.0",
"react": "^18",
"react-dom": "^18",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.51.0",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0",
"rehype-external-links": "^3.0.0",
"rehype-raw": "^7.0.0",
"rehype-sanitize": "^6.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"resend": "^3.2.0",
"socket.io": "^4.7.5",
"socket.io-client": "^4.7.5",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"uploadthing": "^6.5.2",
"uuid": "^9.0.1",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/bcryptjs": "^2.4.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-syntax-highlighter": "^15.5.11",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.3",
"postcss": "^8",
"prisma": "^5.10.2",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
Maybe you can help? Thanks.
Here is the full error:
react-server-dom-web…development.js:1183
Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
at new n (nodejs.mjs:1:222)
at eval (redis.ts:3:15)
at (app-pages-browser)/l…login/page.js:428:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at eval (otp.ts:9:68)
at (app-pages-browser)/l…login/page.js:417:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at eval (page.tsx:22:67)
at (app-pages-browser)/a…login/page.js:329:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at requireModule (react-server-dom-web…velopment.js:156:23)
at initializeModuleChunk (react-server-dom-web…velopment.js:1357:1)
at parseModelString (react-server-dom-web…velopment.js:1665:1)
at Object.eval (react-server-dom-web…velopment.js:2018:1)
at JSON.parse (<anonymous>)
at parseModel (react-server-dom-web…velopment.js:2010:1)
at initializeModelChunk (react-server-dom-web…velopment.js:1325:1)
at readChunk (react-server-dom-web…velopment.js:1163:1)
at reconcileChildFibersImpl (react-dom.development.js:9854:1)
at reconcileChildFibers (react-dom.development.js:9912:1)
at reconcileChildren (react-dom.development.js:15627:1)
at replayFunctionComponent (react-dom.development.js:16236:1)
at replaySuspendedUnitOfWork (react-dom.development.js:25695:1)
at renderRootConcurrent (react-dom.development.js:25467:1)
at performConcurrentWorkOnRoot (react-dom.development.js:24432:1)
at workLoop (scheduler.development.js:256:1)
at flushWork (scheduler.development.js:225:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)
app-index.js:33
The above error occurred in the <ServerRoot> component:
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected]_re…[email protected][email protected]/node_modules/next/dist/client/app-index.js:129:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected]_re…[email protected][email protected]/node_modules/next/dist/client/app-index.js:145:11)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:16472
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js:16472:1)
at beginWork$1 (react-dom.development.js:18410:1)
at beginWork (react-dom.development.js:26791:1)
at performUnitOfWork (react-dom.development.js:25637:1)
at workLoopSync (react-dom.development.js:25353:1)
at renderRootSync (react-dom.development.js:25308:1)
at recoverFromConcurrentError (react-dom.development.js:24525:1)
at performConcurrentWorkOnRoot (react-dom.development.js:24470:1)
at workLoop (scheduler.development.js:256:1)
at flushWork (scheduler.development.js:225:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)
react-dom.development.js:26203
Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
at new n (nodejs.mjs:1:222)
at eval (redis.ts:3:15)
at (app-pages-browser)/l…login/page.js:428:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at eval (otp.ts:9:68)
at (app-pages-browser)/l…login/page.js:417:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at eval (page.tsx:22:67)
at (app-pages-browser)/a…login/page.js:329:1)
at options.factory (webpack.js?v=1711538661176:716:31)
at __webpack_require__ (webpack.js?v=1711538661176:37:33)
at fn (webpack.js?v=1711538661176:371:21)
at requireModule (react-server-dom-web…velopment.js:156:23)
at initializeModuleChunk (react-server-dom-web…velopment.js:1357:1)
at parseModelString (react-server-dom-web…velopment.js:1665:1)
at Object.eval (react-server-dom-web…velopment.js:2018:1)
at JSON.parse (<anonymous>)
at parseModel (react-server-dom-web…velopment.js:2010:1)
at initializeModelChunk (react-server-dom-web…velopment.js:1325:1)
at readChunk (react-server-dom-web…velopment.js:1163:1)
at reconcileChildFibersImpl (react-dom.development.js:9854:1)
at reconcileChildFibers (react-dom.development.js:9912:1)
at reconcileChildren (react-dom.development.js:15627:1)
at replayFunctionComponent (react-dom.development.js:16236:1)
at replaySuspendedUnitOfWork (react-dom.development.js:25695:1)
at renderRootConcurrent (react-dom.development.js:25467:1)
at performConcurrentWorkOnRoot (react-dom.development.js:24432:1)
at workLoop (scheduler.development.js:256:1)
at flushWork (scheduler.development.js:225:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)
I found the error, it was not a Next.js error (who would thought), a mistake from my side, I imported a exported function, from a file, that imported some files, that not work client-side.