esbuild-plugin-solid-js

1.0.1 verified Fri May 01 auth: no javascript

esbuild plugin (v1.0.1) that applies Solid JS transforms to JSX/TSX files using babel-preset-solid, with correct sourcemap inlining. It bridges esbuild’s fast bundling with Solid’s reactive JSX compilation. Unlike manual babel integration, this plugin preserves sourcemaps end-to-end. Does not perform TypeScript transpilation (use esbuild’s built-in ts transform). Active development, simple API with one default export.

Common errors

error Error: transform: Plugin 'solid' returned non-object ↓

cause Calling plugin incorrectly (solid instead of solid()).

fix

Pass solid() as a plugin: plugins: [solid()]

error Cannot find module 'esbuild-plugin-solid-js' ↓

cause Package not installed.

fix

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

error Property 'solid' does not exist on type 'typeof import("esbuild-plugin-solid-js")' ↓

cause Using named import instead of default import.

fix

Change to import solid from 'esbuild-plugin-solid-js'

error The JSX syntax is not enabled ↓

cause tsconfig.json missing jsx: 'preserve'.

fix

Set jsx to 'preserve' in tsconfig compilerOptions.

Warnings

gotcha Only transpiles JSX/TSX files. Does NOT perform TypeScript transpilation. ↓

fix Use esbuild's built-in TypeScript support (set tsconfig properly) or run tsc separately.

gotcha Requires specific tsconfig settings: jsx: 'preserve', jsxImportSource: 'solid-js', inlineSources: true, inlineSourceMap: true. ↓

fix Update tsconfig.json compilerOptions as above.

gotcha Default export only; named import will result in undefined. ↓

fix Use import solid from 'esbuild-plugin-solid-js' not import { solid } from ...

gotcha Babel-based plugin may slow down builds compared to native esbuild transforms. ↓

fix Consider using solid-js's vite plugin for faster builds if not tied to esbuild.

Install

npm install esbuild-plugin-solid-js

yarn add esbuild-plugin-solid-js

pnpm add esbuild-plugin-solid-js

Imports

solid

wrong

import { solid } from 'esbuild-plugin-solid-js'

correct

import solid from 'esbuild-plugin-solid-js'

Default export only; named import will fail.

solid (CommonJS)

wrong

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

correct

const solid = require('esbuild-plugin-solid-js')

Default export via require(). Destructuring will return undefined.

TypeScript usage
```
import solid from 'esbuild-plugin-solid-js'
```
Works with TypeScript if jsx is set to 'preserve' and jsxImportSource to 'solid-js'.

Quickstart

Build a Solid.js application using esbuild with this plugin, showing TypeScript and sourcemap config.

import * as esbuild from 'esbuild';
import solid from 'esbuild-plugin-solid-js';

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

// Ensure tsconfig.json has:
// { "compilerOptions": { "jsx": "preserve", "jsxImportSource": "solid-js", "inlineSources": true, "inlineSourceMap": true } }