Skip to content
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

Merged
merged 2 commits into from
Feb 6, 2024

Conversation

devongovett
Copy link
Member

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 import useState 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.

@rspbot
Copy link

rspbot commented Feb 6, 2024

@rspbot
Copy link

rspbot commented Feb 6, 2024

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

Copy link
Member

@snowystinger snowystinger left a 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?

@devongovett
Copy link
Member Author

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).

@stevegreco
Copy link

I am curious what makes use client more limiting than import 'client-only'. As a library maintainer that is using React Aria to build out our own component library, we have been getting questions about RSC support. People seem to be split between the use of client-only and use client

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Large bundle size when using Button component
5 participants