Compatibility Issue Due to Documentation/Configuration Mismatch

[HamzaAmar]

Hello,

I am encountering a compatibility issue after following your package's installation instructions. The documentation indicates that a specific package should be installed; however, the tsup configuration appears to be referencing an older, incompatible version. This discrepancy is causing conflicts and preventing the package from functioning correctly.

Reproduction Steps

1. Installed the package as instructed:

   yarn add esbuild-plugin-react18

2. Configured tsup I think it use your old package esbuild-react18-useclient as follows:

   // tsup.config.ts or tsup.config.js
   import { defineConfig } from "tsup";
   import react18Plugin from "esbuild-react18-useclient";
   
   const react18PluginOptions: React18PluginOptions = {}
   export default defineConfig(options => ({
       ...
       esbuildPlugins:[react18Plugin(react18PluginOptions)]
   }));

3. Attempted to use the following configuration, but encountered a TypeScript error:

   import { defineConfig } from 'tsup'
   import react18Plugin, { React18PluginOptions } from 'esbuild-plugin-react18'
   
   const react18PluginOptions: React18PluginOptions = {}
   export default defineConfig({
     entry: ['src/index.ts'],
     format: ['cjs', 'esm'],
     splitting: false,
     sourcemap: true,
     dts: true,
     minify: true,
     treeshake: true,
     external: ['react', 'react-dom'],
     esbuildPlugins: [react18Plugin(react18PluginOptions)],
   })

   TypeScript Error:

               Type '"external" | "bundle" | undefined' is not assignable to type '"external" | undefined'.
                 Type '"bundle"' is not assignable to type '"external"'.ts(2322)

Request

Could you please take a look at the tsup configuration within the package and ensure it aligns with the documented dependencies? I would greatly appreciate your assistance in resolving this matter.

Thank you for your time and consideration.

[HamzaAmar]

@mayank1513

Hi Mayank,

I'm hoping you can shed some light on an issue I'm facing. Even when using the deprecated package, I'm encountering a TypeScript error. My goal is to utilize use client for specific components without manual intervention, but the typescript error persists even with this approach.

Could you please investigate why this issue is occurring?

Any guidance would be greatly appreciated!

Type 'import("d:/projects/react/pillar-ui/node_modules/esbuild/lib/main").Plugin' is not assignable to type 'import("d:/projects/react/pillar-ui/node_modules/tsup/node_modules/esbuild/lib/main").Plugin'.
  Types of property 'setup' are incompatible.
    Type '(build: import("d:/projects/react/pillar-ui/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>' is not assignable to type '(build: import("d:/projects/react/pillar-ui/node_modules/tsup/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>'.
      Types of parameters 'build' and 'build' are incompatible.
        Type 'import("d:/projects/react/pillar-ui/node_modules/tsup/node_modules/esbuild/lib/main").PluginBuild' is not assignable to type 'import("d:/projects/react/pillar-ui/node_modules/esbuild/lib/main").PluginBuild'.
          The types of 'initialOptions.packages' are incompatible between these types.
            Type '"external" | "bundle" | undefined' is not assignable to type '"external" | undefined'.
              Type '"bundle"' is not assignable to type '"external"'.ts(2322)