esbuild-solid

0.0.1 verified Fri May 01 auth: no javascript

esbuild-solid is an ESBuild plugin (version 0.6.0, last updated May 2024) that compiles Solid JSX components using Babel under the hood. It automatically detects JSX syntax in .jsx/.tsx files, transforms them with babel-preset-solid, and integrates seamlessly into esbuild's build process. Key differentiators: zero configuration, lightweight (30 lines of code), and works with both JavaScript and TypeScript. Requires esbuild ^0.8.2 and solid-js ^0.23.

Common errors

error Cannot find module '@babel/core' ↓

cause The plugin requires @babel/core as a dependency but it is not installed automatically.

fix

Install @babel/core and @babel/preset-typescript as devDependencies: npm install -D @babel/core @babel/preset-typescript

error Error: The module "/path/to/node_modules/esbuild-solid/lib/index.js" does not provide a named export 'solidPlugin' ↓

cause Using an older version of the package (pre-0.6.0) that did not have named exports or had different export structure.

fix

Update to latest version (>=0.6.0) or use default import: import solidPlugin from 'esbuild-solid'

error error: No loader is configured for ".jsx" files: app.jsx ↓

cause Forgetting to include the plugin in esbuild plugins array.

fix

Add the solidPlugin() call to the plugins array: plugins: [solidPlugin()]

Warnings

gotcha Plugin only transforms files with JSX syntax detected via regex; files without JSX are passed through untransformed, which can lead to missing compilation if JSX is introduced dynamically. ↓

fix Ensure all files containing JSX use .jsx or .tsx extensions; the regex checks for JSX syntax but is heuristic-based.

deprecated Peer dependencies require solid-js ^0.23, which is outdated; newer versions of Solid (>=1.0) may break. ↓

fix Consider using a more recent fork or upgrading to a maintained Solid plugin that supports Solid v1+.

breaking Version 0.6.0 switched build system to unbuild; previously the package was built differently, potentially breaking direct imports of internal files. ↓

fix Import only from 'esbuild-solid' main entry; do not rely on subpath imports.

gotcha The plugin uses @babel/core and babel-preset-solid under the hood, which may conflict with existing Babel configuration if present. ↓

fix If you have a custom Babel setup, consider using a different plugin that allows configuration or ensure there is no conflict.

Install

npm install esbuild-solid

yarn add esbuild-solid

pnpm add esbuild-solid

Imports

solidPlugin
wrong
```
const solidPlugin = require('esbuild-solid')
```
correct
```
import { solidPlugin } from 'esbuild-solid'
```
Main export function that returns the esbuild plugin. Available as a named export. CJS users can use `const { solidPlugin } = require('esbuild-solid')` correctly, but `require('esbuild-solid')` returns an object, not a function.
default
wrong
```
const solidPlugin = require('esbuild-solid')
```
correct
```
import solidPlugin from 'esbuild-solid'
```
Package also exports a default export (the same function). In ESM, default import is valid. In CJS, require returns the module object, so you must destructure.
Type definitions
wrong
```
import { SolidPluginOptions } from 'esbuild-solid' (if used as value)
```
correct
```
import type { SolidPluginOptions } from 'esbuild-solid'
```
TypeScript types are bundled. Options type is exported for configuration, but currently there are no options (empty interface).

Quickstart

Basic usage of esbuild-solid plugin to build a Solid JSX app with esbuild, including error handling.

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

build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
  plugins: [solidPlugin()],
}).catch(() => process.exit(1));