Issue with Preserving "use client" Directive in React Components when building custom package

[muradsofi]

Encountering a problem when trying to build a React component library with Vite. The goal is to mark specific components as client-side components using the "use client" directive.

Approaches Tried:

1. Using the banner Field in rollupOptions:
   Initially tried adding a banner with 'use client'; at the top of my bundled result. This made all components in the library client-side, which is not the intended behavior.

   Vite Config Snippet:

   // ...import statements
   export default defineConfig({
     build: {
       // ...other build configs
       rollupOptions: {
         // ...other rollup configs
         output: {
           banner: `'use client';`,
         },
       },
     },
     // ...other configs
   });
   
   

2. Using rollup-plugin-preserve-directives::
   Attempted to use rollup-plugin-preserve-directives to apply "use client" only which component I want to convert client component. Added the plugin in rollupOptions with preserveModules: true, but it did not work as expected. The "use client" directive did not seem to be preserved in specific components and not visible build result

   Vite Config Snippet:

   // ...import statements
   import preserveDirectives from 'rollup-plugin-preserve-directives';
   export default defineConfig({
   build: {
      // ...other build configs
      rollupOptions: {
        // ...other rollup configs
        output: {
          preserveModules: true,
        },
        plugins: [preserveDirectives()],
      },
    },
    // ...other configs
   });
   

Expected Behavior:
To be able to mark individual components in the library as client-side components using the "use client" directive, and have this directive preserved in the build output.

Actual Behavior:
The "use client" directive is either applied to all components (when using the banner field) or not preserved at all (when using rollup-plugin-preserve-directives).

Questions:
Is there an issue with the Vite configuration or compatibility with rollup-plugin-preserve-directives?
Are there alternative approaches or configurations recommended for handling "use client" directives in a React component library with Vite?

BTW I'm using Vite version "5.0.10",

[mobob]

+1

I just realized that the tsx files i was building did NOT preserve use client which was leading to all kinds of issues 😬. Some solution or workaround here would be great.

[lukaskvapil]

There is another plugin called rollup-preserve-directives that seems to work just fine for me in a similar setup.

[aymericzip]

Took some time to figure out how to integrate this plugin, but thanks @lukaskvapil!

import preserveDirectives from 'rollup-preserve-directives';
import { defineConfig, type Plugin } from 'vite';

export default defineConfig(() => ({
  plugins: [
    ...
    preserveDirectives() as Plugin,
  ],
  ...
}));

not

import preserveDirectives from 'rollup-preserve-directives';

export default defineConfig(() => ({
  ...
  build: {
    ...
    rollupOptions: {
      ...
      plugins: [
       ...
       preserveDirectives()
      ],
    },
  },
}));

Code example using rollup-preserve-directives:
https://github.com/aymericzip/intlayer/blob/main/packages/%40intlayer/design-system/vite.config.ts