fix: site crash when clicking Sonner notifications in Docs
Nuqs Adapter Issue - Sonner Toaster
Problem
When clicking sonner example buttons on the docs site, the application crashes with:
[nuqs] nuqs requires an adapter to work with your framework.
See https://nuqs.dev/NUQS-404
Details about the issue: https://jam.dev/c/979c8044-6cda-4edf-a0e2-e844f1be321a
https://github.com/user-attachments/assets/aa0150e3-3be1-444f-b93c-343a2664740d
Cause
The Toaster component is rendered outside the NuqsAdapter context in the root layout.
In layout.tsx, where <Toaster /> is rendered as a sibling of <NuqsAdapter>{children}</NuqsAdapter> . That component, defined in apps/v4/app/(create)/components/icon-placeholder.tsx, relies on the useDesignSystemParam hook. Internally, this hook is implemented in apps/v4/app/(create)/hooks/use-design-system.tsx and uses useQueryStates from nuqs.
Because of this structure, when a toast is triggered, the Toaster ends up rendering icons through IconPlaceholder, which causes nuqs hooks to run outside of the NuqsAdapter context.
Now how it's looking:
https://github.com/user-attachments/assets/214c08c4-b0ed-4787-8523-7c1cd0fee7ba
Note: An alternative solution would have been to refactor IconPlaceholder to not depend on nuqs hooks, but moving the Toaster inside the adapter is the cleaner architectural fix that resolves the issue at its source.
close #9063
@yeasin2002 is attempting to deploy a commit to the shadcn-pro Team on Vercel.
A member of the Team first needs to authorize it.
Fixed in https://github.com/shadcn-ui/ui/pull/9056