SolidJS "babel-preset-solid" JSX transform error in CI

Solid compiles JSX through babel-preset-solid. It fails when the source uses patterns Solid cannot lower into fine-grained reactive updates, most often destructuring props (which breaks reactivity tracking) or malformed JSX.

What this error means

The build stops with a babel-preset-solid transform error naming a file and line, or a warning that destructured props break reactivity followed by a hard error in strict builds.

[vite-plugin-solid] Transform failed with 1 error:
src/Counter.tsx:4:16: ERROR: babel-preset-solid: cannot transform destructured
prop "count"; access props.count directly to preserve reactivity

Common causes

Props were destructured

Destructuring props reads the value once and loses Solid's reactive tracking; the preset flags or rejects it.

Invalid or unsupported JSX in a component

A malformed expression or a construct Solid cannot lower stops the Babel transform.

How to fix it

Access props directly

1. Stop destructuring the props object in components.
2. Read reactive values as props.x, or use splitProps/mergeProps when you must separate them.
3. Re-run the build to confirm the transform passes.

// wrong: loses reactivity
function Counter({ count }) { return <span>{count}</span>; }

// right
function Counter(props) { return <span>{props.count}</span>; }

Use splitProps for grouping

When you need a subset of props, keep them reactive with splitProps instead of destructuring.

import { splitProps } from 'solid-js';
const [local, rest] = splitProps(props, ['count']);

How to prevent it

• Never destructure props in Solid components.
• Use splitProps/mergeProps to work with prop subsets.
• Enable the eslint-plugin-solid rules to catch destructuring before CI.

Related guides