How to build in a way that every client component is stored in its own file?

[renet]

I have the following folder structure

src
  - category-1
    - component-1.tsx
    - component-2.tsx # starts with "use client";
    - ...
  - category-2
    - component-n.tsx
    - ...
  - category-n
    - ...
  - index.ts # exporting all components

And the following tsup.config.ts

import { defineConfig } from "tsup";
import reactUseClient from "esbuild-react18-useclient";

export default defineConfig((options) => ({
  dts: true,
  entry: ["src/**/*.tsx", "src/index.ts"],
  esbuildPlugins: [reactUseClient],
  external: ["react"],
  format: ["esm"],
  minify: !options.watch,
}));

With this setup I get every component in its own file in the dist folder, but also an index.js importing/exporting all the components at once.

dist
  - category-1
    - component-1.d.ts
    - component-1.mjs
    - component-2.d.ts
    - component-2.mjs
    - ...
  - category-2
    - component-n.d.ts
    - component-n.mjs
    - ...
  - category-n
    - ...
  - chunk-1.mjs
  - chunk-2.mjs
  - chunk-n.mjs
  - index.d.ts
  - index.js

BUT the esbuild-react18-useclient does not work with that setup. There is not a single "use client" in any of the transpiled files. Am I doing something wrong here? How would I manage to get a file that contains every component, but also only the components that need to use the "use client" directive?

Disclaimer: I'm totally new to tsup and am not even sure, if this is an issue with the plugin or rather with tsup/esbuild itself. Please let me know, if this is the wrong place to ask this question. :)

[mayank1513]

Hi,

thanks for reaching out.

Could you please share a link to a repo containing a minimum reproducible example.

Also, I recommend you to use (turborepo-template)[https://github.com/react18-tools/turborepo-template/] that uses esbuild-plugin-react18.

[renet]

Thanks for your support! Please find a minimal repro repo here: https://github.com/renet/tsup-react18-repro

It uses esbuild-plugin-react18 now, but the result with esbuild-react18-useclient is basically the same.

Run pnpm i to install and pnpm build to build. I'm using pnpm v6.11.0 and Node.js v20.10.0.

I expect to find "use client" somewhere in the dist folder after the build, but it's not there.

[mayank1513]

Your tsup version is outdated. Please use latest dependencies. Upgrade dependencies by running pnpm update --latest. Or use version 8+ for tsup.