{"id":25441,"library":"esbuild-react18-useclient","title":"esbuild-react18-useclient","description":"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.","status":"deprecated","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/mayank1513/esbuild-react18-useclient","tags":["javascript","react","nextjs","esbuild","esbuild-plugin","useclient","tsup","typescript","react18"],"install":[{"cmd":"npm install esbuild-react18-useclient","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-react18-useclient","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-react18-useclient","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export (ESM-only, no CJS support). Plugin function expects no arguments.","wrong":"const reactUseClient = require('esbuild-react18-useclient')","symbol":"reactUseClient","correct":"import reactUseClient from 'esbuild-react18-useclient'"},{"note":"CommonJS users must access .default because package is ESM-first.","wrong":"const reactUseClient = require('esbuild-react18-useclient')","symbol":"reactUseClient (CommonJS)","correct":"const reactUseClient = require('esbuild-react18-useclient').default"},{"note":"Only default export is provided; named import does not exist.","wrong":"import { reactUseClient } from 'esbuild-react18-useclient'","symbol":"Named export fallback (nonexistent)","correct":"import reactUseClient from 'esbuild-react18-useclient'"}],"quickstart":{"code":"// tsup.config.ts\nimport { defineConfig } from 'tsup';\nimport reactUseClient from 'esbuild-react18-useclient';\n\nexport default defineConfig(options => ({\n  ...options,\n  esbuildPlugins: [reactUseClient()],\n}));\n\n// or with esbuild directly:\nimport * as esbuild from 'esbuild';\nimport reactUseClient from 'esbuild-react18-useclient';\n\nawait esbuild.build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/index.js',\n  plugins: [reactUseClient()],\n});","lang":"typescript","description":"Shows how to use the plugin with tsup and directly with esbuild. The plugin automatically adds 'use client' directives to client components."},"warnings":[{"fix":"Replace with esbuild-plugin-react18: npm install esbuild-plugin-react18 and update import.","message":"This package is deprecated. Use esbuild-plugin-react18 instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure you call the plugin: [reactUseClient()] instead of [reactUseClient].","message":"Plugin must be called as a function (reactUseClient()) when passed to esbuildPlugins array; passing the function reference directly will cause errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use compatible bundler. For webpack/rollup, consider alternatives like @rollup/plugin-babel with directives.","message":"Only works with esbuild-based bundlers (tsup, esbuild). Does not work with webpack, rollup, or vite without esbuild plugin integration.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev esbuild-react18-useclient","cause":"Package not installed or listed in dependencies.","error":"Error: Cannot find module 'esbuild-react18-useclient'"},{"fix":"Use import reactUseClient from 'esbuild-react18-useclient' (ESM) or const reactUseClient = require('esbuild-react18-useclient').default (CommonJS).","cause":"Import returns undefined due to wrong import style (CommonJS).","error":"TypeError: reactUseClient is not a function"},{"fix":"Add 'use client'; at the top of your client component files.","cause":"Plugin expects a 'use client' string in the source code to inject directive; missing in source files.","error":"Error: [plugin] esbuild-react18-useclient: No 'use client' directive found in source"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}