Next.js Discord

Discord Forum

The homepage suddenly stopped rendering

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
I can't open my homepage / because it throws a error when SSR.. I didn't change anything in this page https://github.com/ruanosena/cuidador-de-pets/blob/main/src/app/(marketing)/page.tsx in my last commit (was working normally), and the error during build is that:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Refs cannot be used in Server Components, nor passed to Client Components.
    at e (C:\Users\ruose\git\cuidador-de-pets\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:17:17099)
    ...
Export encountered an error on /(marketing)/page: /, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

It doesn't pass the build if I don't declare "use client" at the homepage.

Next version: 15.2.4
I use npm install with --legacy-peer-deps flag because of shadcn-ui compatibility.

Last commit: https://github.com/ruanosena/cuidador-de-pets/commit/1bfcaf08d8a47c5a9577211fcf3deb29c7cd62a8 I have made some prisma models change, a constant added with prisma typing, a server-action were also added, and some changes to UI of the app with addition of the tooltip component from shadcn-ui.

The error when accessing the frontend in development:
Unhandled Runtime Error
Server

Error: Refs cannot be used in Server Components, nor passed to Client Components.

Call Stack

resolveErrorDev
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1845:1)
...


I don't know if this is related to react-dom or next.js, I couldn't find this error anywhere.

6 Replies

Checkered Giant
I can't see use Client at the pages.tsx.
if you use the useRef, then you need to add use client at the top of file.
Hi.
I can help you.
Forest bachacOP
I think that's a bug because there is no ref in my page (link in post), but I don't know how to debug nextjs, I was doing a course and managed to continue the project. @TsukiKage Thank you, your help is welcome.
Forest bachacOP
After inspecting it with @TsukiKage, I found that Button make use of @radix-ui/react-slot which was updated from "^1.1.2" to "^1.2.1" (after installing shadcn badge) then it uses it in my homepage when I pass asChild prop from Button to a Next Link component. The solution was to make button.tsxa client component with "use client". I'll open an issue in radix-ui. (https://github.com/radix-ui/primitives/issues/3537)