bunchee icon indicating copy to clipboard operation
bunchee copied to clipboard

Code inlined into client boundary breaks `react-server` conditional export

Open amannn opened this issue 6 months ago • 0 comments

Hey, many thanks a lot for closing some bugs last week!

I continued with my exploration of adopting bunchee for next-intl to get rid of my custom setup and ran into another tricky bug.

I've added reproduction in amannn/bunchee-test@66cf3ef.

Here is the breakdown:

  1. A new react-server conditional export for the ./react namespace was added (ref)
  2. In this entry point, util1 from ../more-utils is imported and used in server-only code. Additionally, ./Component is imported (in this case merely exported, but that is secondary), which uses the 'use client' banner (ref)
  3. ./Component also imports util1 from ../more-utils (ref)
  4. If you look at the bundled output of the client component, you'll see that util1 was bundled into this chunk (ref)
  5. In turn, the bundled output of esm/react.react-server.mjs now imports util1 from the client component (ref).

This causes util1 to no longer be callable in react.react-server.mjs, since due to the rules of Server Components, only a reference is imported and not the actual function.

My expectation would be, that the 'use client' banner produces an isolated module that only contains the code from the original file (possibly with client-only functionality inlined).

Hope this makes sense! Many thanks for your tireless work on bunchee! ❤️

amannn avatar Aug 22 '24 10:08 amannn