esbuild-plugin-jsximportsource

1.0.1 verified Fri May 01 auth: no javascript deprecated

An esbuild plugin that enables the @jsxImportSource pragma for automatic JSX runtime support. Version 1.0.1 is current, but the package is marked as obsolete because esbuild natively added automatic JSX runtime support in v0.14.51. This plugin provides a workaround for older esbuild versions that do not support the pragma. It ships TypeScript types and has a peer dependency on esbuild ^0.14.38. The v1 release is ESM-only, breaking CJS usage. Key differentiator: it transforms @jsxImportSource into explicit imports for the JSX factory, allowing libraries like Emotion to work with esbuild.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause Using require() on v1 which is ESM-only.

fix

Use dynamic import: const { jsxImportSourcePlugin } = await import('esbuild-plugin-jsximportsource');

error TypeError: jsxImportSourcePlugin is not a function ↓

cause Default import used instead of named import.

fix

Use named import: import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource';

error Cannot find module 'esbuild-plugin-jsximportsource' ↓

cause Package not installed or version mismatch.

fix

Run npm install esbuild-plugin-jsximportsource and ensure peer dependency esbuild ^0.14.38 is satisfied.

Warnings

deprecated Package is obsolete; esbuild >=0.14.51 supports automatic JSX runtime natively. ↓

fix Upgrade esbuild to >=0.14.51 and remove this plugin.

breaking v1 is ESM-only; CommonJS require() will fail. ↓

fix Use dynamic import() in CJS or downgrade to v0.x (e.g., 0.0.4).

gotcha Plugin only transforms .jsx and .tsx files by default; other extensions need custom filter. ↓

fix Pass filter option: jsxImportSourcePlugin({ filter: /\.(js|ts|jsx|tsx)$/ })

Install

npm install esbuild-plugin-jsximportsource

yarn add esbuild-plugin-jsximportsource

pnpm add esbuild-plugin-jsximportsource

Imports

jsxImportSourcePlugin

wrong

const { jsxImportSourcePlugin } = require('esbuild-plugin-jsximportsource')

correct

import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource'

v1 is ESM-only; use dynamic import() in CJS or pin v0.x

import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource'

wrong

import jsxImportSourcePlugin from 'esbuild-plugin-jsximportsource'

correct

import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource'

The package exports a named export, not a default export.

require('esbuild-plugin-jsximportsource') (CJS)

wrong

const { jsxImportSourcePlugin } = require('esbuild-plugin-jsximportsource')

correct

const jsxImportSourcePlugin = (await import('esbuild-plugin-jsximportsource')).jsxImportSourcePlugin

v1 is ESM-only: requires dynamic import from CJS; v0.x supports require.

Quickstart

Demonstrates using the plugin with esbuild to bundle a TSX file, transforming @jsxImportSource pragma.

import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource';
import * as esbuild from 'esbuild';

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