Emit "use client" directive for RSC builds

[vicary]

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]

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.

[milovangudelj]

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]

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]

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.