Next.js Discord

Discord Forum

usesearchparams() should be wrapped in a suspense error!!

Answered
Vespid wasp posted this in #help-forum
Open in Discord
Vespid waspOP
Hello,
I'm encountering an issue with useSearchParams. I'm getting the following error in my logs, even though the build passes successfully:

Error: Bail out to client-side rendering: useSearchParams()
  at g (.next/server/chunks/523.js:3:17692)
  at l (.next/server/chunks/523.js:13:74100)
  at f (.next/server/app/dashboard/users/page.js:6:29380)
  at <unknown> (.next/server/app/dashboard/users/page.js:4:82261)
  at cn (.next/server/app/dashboard/users/page.js:4:91340) {
  reason: 'useSearchParams()',
  digest: 'BAILOUT_TO_CLIENT_SIDE_RENDERING'
} Fail from useSearchParam


This issue is happening on my /dashboard/users page. I've already wrapped the pages that use useSearchParams with <Suspense>, and this error didn't occur before.
Could this be a problem? How can I resolve this?
Here is the link to my GitHub repository:
https://github.com/Fullstack-Empire/hinther-property-admin-dashboard
Thank you.
Answered by Vespid wasp
I got it bro thank alot.
warp suspense in layout.tsx
View full answer

7 Replies

Vespid waspOP
Could you please explain that in a bit more detail?
I do have a themeSwitcher implemented in my project.
i mean , try to wrap the theme switch components in a suspense too.
I think i remember i face some client side problem because of the theme switcher.
I can't look detailed to the repo, and it's still indexing so I can't search on somethings.
But, you can also add suspense in the server page that importing a client component
Vespid waspOP
I've been trying to add Suspense boundaries. In my project, I'm using useSearchParams on the client side, so I've wrapped the main client component with <Suspense>, but I'm still getting the same error, bro.
Vespid waspOP
I got it bro thank alot.
warp suspense in layout.tsx
Answer
West African Crocodile
hi