esbuild-plugin-jsx

1.0.1 verified Fri May 01 auth: no javascript

esbuild-plugin-jsx v1.0.1 is a lightweight esbuild plugin that enables Vue 3 JSX/TSX support. It transpiles JSX syntax in Vue 3 single-file components using esbuild's built-in JSX transform with Vue's runtime. Unlike @vitejs/plugin-vue-jsx, this plugin is designed for standalone esbuild usage (e.g., in Rollup, Webpack, or CLI builds). It ships TypeScript declarations and has no dependencies. Release cadence is infrequent; current stable version is 1.0.1, unchanged since initial release. Key differentiator: minimal, zero-config integration for Vue 3 JSX in esbuild pipelines.

Common errors

error Module "esbuild-plugin-jsx" has been externalized for browser compatibility... ↓

cause Using the plugin in a browser environment (e.g., bundling for browser) without proper externalization.

fix

Add 'esbuild-plugin-jsx' to external in esbuild config: external: ['esbuild-plugin-jsx']

error TypeError: vueJsx is not a function ↓

cause Incorrect import syntax (e.g., named import instead of default).

fix

Use default import: import vueJsx from 'esbuild-plugin-jsx'

error error: No matching export in "esbuild-plugin-jsx" for import "VueJsxOptions" ↓

cause Trying to import VueJsxOptions as a value instead of a type.

fix

Use import type: import type { VueJsxOptions } from 'esbuild-plugin-jsx'

Warnings

gotcha Requires Vue 3 runtime to be present in the final bundle; the plugin only transpiles JSX, it does not polyfill Vue APIs. ↓

fix Ensure vue is installed as a dependency and included in the bundle.

gotcha Plugin does not handle .vue single-file components; it only processes .jsx/.tsx files. ↓

fix Use a separate esbuild plugin (e.g., esbuild-vue) for .vue files.

gotcha JSX transform uses esbuild's built-in 'transform' API with jsx: 'automatic' and jsxImportSource: 'vue'. Custom JSX pragma is not supported. ↓

fix If you need custom JSX pragma, consider forking the plugin or using @vitejs/plugin-vue-jsx.

deprecated No breaking changes or deprecations reported yet. Package has only one version. ↓

fix N/A

Install

npm install esbuild-plugin-jsx

yarn add esbuild-plugin-jsx

pnpm add esbuild-plugin-jsx

Imports

vueJsx
wrong
```
const vueJsx = require('esbuild-plugin-jsx')
```
correct
```
import vueJsx from 'esbuild-plugin-jsx'
```
Package uses ESM default export; CJS require() will fail unless using dynamic import().
VueJsxOptions
wrong
```
import { VueJsxOptions } from 'esbuild-plugin-jsx'
```
correct
```
import type { VueJsxOptions } from 'esbuild-plugin-jsx'
```
VueJsxOptions is only exported as a TypeScript type; use type import to avoid runtime error.
default export (unnamed)
wrong
```
import { vueJsx } from 'esbuild-plugin-jsx'
```
correct
```
import vueJsx from 'esbuild-plugin-jsx'
```
There is no named export; the plugin is a default function export.

Quickstart

Demonstrates bundling a Vue 3 TSX file with esbuild using the JSX plugin.

import { build } from 'esbuild';
import vueJsx from 'esbuild-plugin-jsx';

await build({
  entryPoints: ['app.tsx'],
  bundle: true,
  outfile: 'dist/app.js',
  plugins: [vueJsx()],
});