Error when build: ⨯ useSearchParams() should be wrapped in a suspense boundary at page
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Hello,
I'm working on a project that use refine and Next.js 14.2.11, all is fine in dev mode but when I'm trying to build the project I got the error in related attachments (error-reported.png).
I just disable
I'm working on a project that use refine and Next.js 14.2.11, all is fine in dev mode but when I'm trying to build the project I got the error in related attachments (error-reported.png).
I just disable
missingSuspenseWithCSRBailout flag in next.config.js but I want to understand what is happening. Attached my page and part of component, any sugestion or help I will be so many gratefully.
9 Replies
To solve this issue wrap your component that needs the
useSearchParams inside a suspense boundary. Like that the error will be gone
Eastern yellowjacket
you need to add a loading.tsx file
thanks for your confirmation
@Spectacled bear solved?
Spectacled bearOP
@B33fb0n3 nope, that is strange :/ I'm taking a deep learn to understand what is happening, maybe refine needs a PR with the solution
you did this? https://nextjs-forum.com/post/1285283501196709931#message-1285481342213029909 (<---- click)
Spectacled bearOP
@B33fb0n3 yes!
remove the logic from your Page function
have a rsc wrapper that wrapps the async component with a suspense