esbuild-react18-useclient

1.0.8 verified Fri May 01 auth: no javascript deprecated

esbuild plugin for compiling React libraries compatible with React 18 server and client components, used with Next.js, Remix, etc. Current stable version 1.0.8. Deprecated in favor of esbuild-plugin-react18. Automatically adds 'use client' directive to client components during esbuild bundling. Key differentiator: enables libraries to ship both server and client components using esbuild/tsup without manual directive insertion. Lightweight alternative to full-fledged RSC tooling.

Common errors

error Error: Cannot find module 'esbuild-react18-useclient' ↓

cause Package not installed or listed in dependencies.

fix

Run npm install --save-dev esbuild-react18-useclient

error TypeError: reactUseClient is not a function ↓

cause Import returns undefined due to wrong import style (CommonJS).

fix

Use import reactUseClient from 'esbuild-react18-useclient' (ESM) or const reactUseClient = require('esbuild-react18-useclient').default (CommonJS).

error Error: [plugin] esbuild-react18-useclient: No 'use client' directive found in source ↓

cause Plugin expects a 'use client' string in the source code to inject directive; missing in source files.

fix

Add 'use client'; at the top of your client component files.

Warnings

deprecated This package is deprecated. Use esbuild-plugin-react18 instead. ↓

fix Replace with esbuild-plugin-react18: npm install esbuild-plugin-react18 and update import.

gotcha Plugin must be called as a function (reactUseClient()) when passed to esbuildPlugins array; passing the function reference directly will cause errors. ↓

fix Ensure you call the plugin: [reactUseClient()] instead of [reactUseClient].

gotcha Only works with esbuild-based bundlers (tsup, esbuild). Does not work with webpack, rollup, or vite without esbuild plugin integration. ↓

fix Use compatible bundler. For webpack/rollup, consider alternatives like @rollup/plugin-babel with directives.

Install

npm install esbuild-react18-useclient

yarn add esbuild-react18-useclient

pnpm add esbuild-react18-useclient

Imports

reactUseClient

wrong

const reactUseClient = require('esbuild-react18-useclient')

correct

import reactUseClient from 'esbuild-react18-useclient'

Default export (ESM-only, no CJS support). Plugin function expects no arguments.

reactUseClient (CommonJS)

wrong

const reactUseClient = require('esbuild-react18-useclient')

correct

const reactUseClient = require('esbuild-react18-useclient').default

CommonJS users must access .default because package is ESM-first.

Named export fallback (nonexistent)

wrong

import { reactUseClient } from 'esbuild-react18-useclient'

correct

import reactUseClient from 'esbuild-react18-useclient'

Only default export is provided; named import does not exist.

Quickstart

Shows how to use the plugin with tsup and directly with esbuild. The plugin automatically adds 'use client' directives to client components.

// tsup.config.ts
import { defineConfig } from 'tsup';
import reactUseClient from 'esbuild-react18-useclient';

export default defineConfig(options => ({
  ...options,
  esbuildPlugins: [reactUseClient()],
}));

// or with esbuild directly:
import * as esbuild from 'esbuild';
import reactUseClient from 'esbuild-react18-useclient';

await esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [reactUseClient()],
});