-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove "use client" and mark packages as client-only instead #5826
Conversation
Build successful! 🎉 |
## API Changes
unknown top level export { type: 'any' } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just checking, we only want to import this client only for our mono packages, we don't want to use it for any of the individual packages?
ehhhh we could, but it seemed like a lot of effort and I don't think many people use the individual packages (especially with next.js). |
I am curious what makes |
Closes #5639
This reverts #5498 where we added "use client" to our packages to support Next.js server components. I now believe this was a mistake. "use client" indicates a boundary between a server component and a client component, so the idea was to enable RSP/RAC components to be used directly from server components without needing to create your own client component wrapper. However in reality this did not work well because all of the props sent from a server component to a client component must be serializable. Therefore, things like event handlers could not be sent. Most of our components require some kind of event, so you'd end up needing to move the component that used RSP/RAC to your own client component anyway. In addition, some bundling issues with next.js caused code splitting not to work properly, resulting in massive bundles (#5639).
This PR instead uses
import "client-only"
to enforce that RAC and RSP can only be imported from a client component. Next.js will throw a build time error when this package is imported from a server component, providing a better error message than the one you get by default (either something deep inside RSP/RAC trying to importuseState
or another React hook not available in server components, or when trying to pass an event handler from a server component to a client component). Now the error is something like "this package can only be imported in a client component". Outside of Next.js this package is an empty file and has no effect.