Challenges with Supporting Server Components Due to Bundling Configuration

[HamzaAmar]

I've encountered some difficulties in fully supporting server components in this library because of an issue with the current bundling configuration. Presently, all code is bundled into a single file, which causes conflicts when certain components or functions need to be loaded as server components. Since some components rely on client-side features like useState or Context, the entire package ends up requiring the 'use client'directive, even for parts that don’t need it.

To address this, I've started bundling each component separately. and use barrel index file to gather all components, applying the 'use client' directive only for the components need it. This change should help resolve the issues related to bundling everything into one file while ensuring proper support for server components.

Below is the configuration for the previous version of Tsup, which bundles the entire library into a single large file. While it functions correctly, it poses limitations in supporting server components:

import { defineConfig } from 'tsup'

export default defineConfig((option) => ({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  splitting: false,
  sourcemap: true,
  clean: true,
  dts: true,
  treeshake: true,
  external: ['react', 'react-dom'],
  minify: !option.watch,
}))

Here is the new Tsup configuration I'm testing:

export default defineConfig({
  sourcemap: true,
  entry: ['./src/index.ts', './src/core/**/index.tsx'],
  format: ['cjs', 'esm'],
  splitting: false,
  outDir: 'dist/',
  dts: true,
  minify: true,
  treeshake: true,
  external: ['react', 'react-dom'],
  bundle: false,
  esbuildOptions(options, context) {
    options.outbase = './'
  },
})

However, this version is causing an issue:

@pillar-ui/core:dev: node:events:497
@pillar-ui/core:dev:       throw er; // Unhandled 'error' event
@pillar-ui/core:dev:       ^
@pillar-ui/core:dev:
@pillar-ui/core:dev: Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
@pillar-ui/core:dev:     at [kOnExit] (node:internal/worker:313:26)
@pillar-ui/core:dev:     at Worker.<computed>.onexit (node:internal/worker:229:20)
@pillar-ui/core:dev: Emitted 'error' event on Worker instance at:
@pillar-ui/core:dev:     at [kOnExit] (node:internal/worker:313:12)
@pillar-ui/core:dev:     at Worker.<computed>.onexit (node:internal/worker:229:20) {
@pillar-ui/core:dev:   code: 'ERR_WORKER_OUT_OF_MEMORY'

Task :

• Bundle each file together
• Add the "use client" directive to the components that require it

If anyone has suggestions for fixing this issue or would like to help, your contributions would be greatly appreciated!