esbuild-plugin-solid

0.6.0 verified Mon Apr 27 auth: no javascript

An esbuild plugin for compiling Solid.js JSX components using Babel transforms with babel-preset-solid. Version 0.6.0 pairs with esbuild >=0.20 and solid-js >=1.0. The plugin automatically detects JSX syntax and applies the necessary transformations. Unlike Rollup-based bundlers like Vite/SolidStart, this plugin is a lightweight alternative for simple builds, but it may produce larger bundles due to less effective dead-code elimination. It supports TypeScript via @babel/preset-typescript and offers options for SSR, hydration, and custom Babel configurations.

Common errors

error Error: Cannot find module 'esbuild-plugin-solid' ↓

cause Package not installed or not in node_modules

fix

Run npm install esbuild-plugin-solid --save-dev

error TypeError: solidPlugin is not a function ↓

cause Using default import instead of named import

fix

Use import { solidPlugin } from 'esbuild-plugin-solid' instead of import solidPlugin from 'esbuild-plugin-solid'

error Error: Requires Babel "@babel/core" ↓

cause Missing Babel dependencies that the plugin expects

fix

Install required Babel packages: @babel/core, @babel/preset-typescript, babel-preset-solid

Warnings

gotcha Dead code elimination is less effective than Rollup; bundle sizes may be significantly larger. ↓

fix Consider using Rollup or Vite for production builds where output size matters.

deprecated Using require() is deprecated in ESM environments; prefer import syntax in modern Node.js. ↓

fix Use import { solidPlugin } from 'esbuild-plugin-solid' with ESM.

gotcha The plugin only transforms files that contain JSX syntax (detected by a simple regex). Files without JSX are left untouched, which may cause issues if they rely on Solid-specific transforms (e.g., reactive assignments). ↓

fix Ensure all files needing Solid transforms contain at least one JSX expression.

Install

npm install esbuild-plugin-solid

yarn add esbuild-plugin-solid

pnpm add esbuild-plugin-solid

Imports

solidPlugin
wrong
```
const solidPlugin = require('esbuild-plugin-solid')
```
correct
```
import { solidPlugin } from 'esbuild-plugin-solid'
```
The package exports a single named symbol. Default import is not available. CJS require works as shown in docs.

Quickstart

Shows the minimal setup to bundle a Solid.js entry point with esbuild using the solidPlugin.

const esbuild = require('esbuild');
const { solidPlugin } = require('esbuild-plugin-solid');

esbuild.build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [solidPlugin()],
}).catch(() => process.exit(1));