The homepage suddenly stopped rendering
Unanswered
Forest bachac posted this in #help-forum
Forest bachacOP
I can't open my homepage
It doesn't pass the build if I don't declare
Next version: 15.2.4
I use
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:
I don't know if this is related to react-dom or next.js, I couldn't find this error anywhere.
/
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.tsx
a client component with "use client". I'll open an issue in radix-ui. (https://github.com/radix-ui/primitives/issues/3537)