Emit "use client" directive for RSC builds #3115
Comments
|
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. |
|
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. |
|
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 |
|
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. |
|
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:
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. |
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
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
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
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?
The text was updated successfully, but these errors were encountered: