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

Emit "use client" directive for RSC builds #3115

Closed
vicary opened this issue May 10, 2023 · 5 comments
Closed

Emit "use client" directive for RSC builds #3115

vicary opened this issue May 10, 2023 · 5 comments

Comments

@vicary
Copy link

vicary commented May 10, 2023

React Server Components require client-only components to be served with a module-level directive "use client", hook authors are now required to add them to stay forward compatible.

Is there a way to tell esbuild to keep them in the final ESM bundle?

@evanw
Copy link
Owner

evanw commented May 12, 2023

Unknown directives are currently stripped by the minifier. I can change esbuild to preserve them instead. In the meantime, you can use the banner feature to do this.

@evanw evanw closed this as completed in c19689a May 12, 2023
@milovangudelj
Copy link

Sorry to jump in here after all this time but I'll need this soon and just adding a banner to the entire bundle seems a bit excessive. It's been a while since I've used esbuild so I might have forgotten a few things that can circumvent this issue.

Let me know if the situation has changed or not and if there's some magic trickery I can use to keep the directive only for the components that actually need it.

@vicary
Copy link
Author

vicary commented Sep 15, 2023

Esbuild does it's job at the referenced commit, but my experience says that the whole toolchain is usually more than esbuild.

You may need to code split via something like await import(), such that "use client" has a separate file to stay, and make sure subsequent processors (if they exist) do not remove them again.

@clearly-outsane
Copy link

clearly-outsane commented Dec 10, 2023

Did this get released? I've noticed it only keeps the directive in index.ts files and not the chunks and component files. So any nestting of rsc+rcc never will work.

@Seojunhwan
Copy link

Hello everyone,

I wanted to follow up on this issue as I've developed a plugin that might help address this problem: https://github.com/Seojunhwan/esbuild-plugin-preserve-directives

This plugin is specifically designed to preserve directives like "use client" in esbuild output. I created it as a potential solution for those who need this functionality before it's natively implemented in esbuild.

Key features of the plugin:

  1. Preserves "use client" and other directives in the output
  2. Works with both JavaScript and TypeScript files
  3. Configurable to preserve specific directives

I'd love to get your feedback on this approach. Has anyone else been working on similar solutions? Do you see any potential issues or improvements?

If you try it out, please let me know how it works for you. I'm open to suggestions and contributions to make it more robust and useful for the community.

This could serve as a temporary solution for users who need to preserve the "use client" directive in their RSC builds while we wait for native support in esbuild.

adamsoderstrom added a commit to noaignite/accelerator that referenced this issue Aug 26, 2024
Prior to this commit, we've had an issue where directives like `"use
client"` gets stripped out of the `chunk-*` files created in the `dist`
folder, when specifying `bundle: true` in `tsup.config.ts`.
I tried to trace this issue and found a corresponding one in the `esbuild` repo (0).
In that, i found that @Seojunhwan had created a ESBuild plugin (1) that
resolves this issue. Though, as of this writing, the plugin doesn't
support single-quote directives, which we have in our repository. I
forked the repo and submitted a PR for that (2). Until then, i've
published my fix under my personal namespace and use it here.

[0]: evanw/esbuild#3115
[1]: https://github.com/Seojunhwan/esbuild-plugin-preserve-directives
[2]: Seojunhwan/esbuild-plugin-preserve-directives#15
adamsoderstrom added a commit to noaignite/accelerator that referenced this issue Aug 26, 2024
Prior to this commit, we've had an issue where directives like `"use
client"` gets stripped out of the `chunk-*` files created in the `dist`
folder, when specifying `bundle: true` in `tsup.config.ts`.
I tried to trace this issue and found a corresponding one in the `esbuild` repo (0).
In that, i found that @Seojunhwan had created a ESBuild plugin (1) that
resolves this issue. Though, as of this writing, the plugin doesn't
support single-quote directives, which we have in our repository. I
forked the repo and submitted a PR for that (2). Until then, i've
published my fix under my personal namespace and use it here.

[0]: evanw/esbuild#3115
[1]: https://github.com/Seojunhwan/esbuild-plugin-preserve-directives
[2]: Seojunhwan/esbuild-plugin-preserve-directives#15
adamsoderstrom added a commit to noaignite/accelerator that referenced this issue Aug 26, 2024
Prior to this commit, we've had an issue where directives like `"use
client"` gets stripped out of the `chunk-*` files created in the `dist`
folder, when specifying `bundle: true` in `tsup.config.ts`.
I tried to trace this issue and found a corresponding one in the `esbuild` repo (0).
In that, i found that @Seojunhwan had created a ESBuild plugin (1) that
resolves this issue. Though, as of this writing, the plugin doesn't
support single-quote directives, which we have in our repository. I
forked the repo and submitted a PR for that (2). Until then, i've
published my fix under my personal namespace and use it here.

[0]: evanw/esbuild#3115
[1]: https://github.com/Seojunhwan/esbuild-plugin-preserve-directives
[2]: Seojunhwan/esbuild-plugin-preserve-directives#15
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

No branches or pull requests

5 participants