babel-preset-solid

1.9.12 verified Sat Apr 25 auth: no javascript

Babel preset that transforms JSX specifically for Solid.js, enabling Solid's fine-grained reactivity. Current stable version is 1.9.12, with v2.0.0 in beta. Released infrequently, tied to Solid core releases. Key differentiator: it is the official preset maintained by the Solid team, handling Solid's unique JSX runtime and providing optimizations for server-side rendering and hydration. Compared to generic JSX presets, it automatically injects Solid's runtime imports and supports Solid's control flow components.

Common errors

error Error: Cannot find module 'solid-js' Require stack: ... ↓

cause solid-js is not installed in node_modules

fix

npm install solid-js

error SyntaxError: Unexpected token '<' ↓

cause Babel preset not applied; JSX is not transformed

fix

Ensure babel-preset-solid is in your presets array and that Babel is configured correctly.

error Module not found: Can't resolve 'babel-preset-solid' ↓

cause babel-preset-solid is not installed as a devDependency

fix

npm install --save-dev babel-preset-solid

Warnings

deprecated babel-preset-solid v1.x is deprecated in favor of v2.0.0-beta ↓

fix Update to babel-preset-solid@^2.0.0-beta.0 or later.

gotcha The preset automatically imports the JSX runtime; do not manually import 'jsx' or 'jsxDEV' from solid-js ↓

fix Remove any manual import of jsx/jsxDEV and rely on the Babel preset.

breaking Solid 2.0 changes the JSX runtime; babel-preset-solid v2 is not backward-compatible with Solid 1.x ↓

fix Use babel-preset-solid@^1.x for Solid 1.x projects.

gotcha This preset only works with Babel 7 or later; Babel 6 is not supported ↓

fix Upgrade to @babel/core@^7.0.0.

Install

npm install babel-preset-solid

yarn add babel-preset-solid

pnpm add babel-preset-solid

Imports

default
wrong
```
import presets from 'babel-preset-solid'
```
correct
```
module.exports = { presets: ['babel-preset-solid'] }
```
This package is a Babel preset, not a JS module. It is used in Babel config files via CommonJS require.
solid-js/h
wrong
```
import { h } from 'solid-js'
```
correct
```
import { h } from 'solid-js/h'
```
The h function is auto-imported by babel-preset-solid; manual import is not needed but possible for direct usage.
jsxDEV
wrong
```
import { jsxDEV } from 'solid-js'
```
correct
```
/* handled automatically by Babel */
```
jsxDEV is an internal runtime symbol injected by Babel; never import it manually.

Quickstart

Shows minimal Babel config to enable Solid JSX transformation and a simple counter component.

// Install
// npm install --save-dev babel-preset-solid @babel/core
// npm install solid-js

// babel.config.cjs
module.exports = {
  presets: ['babel-preset-solid']
};

// App.jsx
import { createSignal } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}
    </button>
  );
}

export default Counter;