babel-preset-preact

2.0.0 verified Sat Apr 25 auth: no javascript

Babel preset that transforms JSX into h() calls for Preact. Current version 2.0.0 is stable and minimal, with no frequent updates. Unlike babel-preset-react, it outputs Preact's h() instead of React.createElement(), avoiding the need for a pragma. Best paired with a JSX transform plugin like @babel/plugin-transform-react-jsx and setting the pragma to 'h'. Suitable for projects using Preact with Babel.

Common errors

error Support for the experimental syntax 'jsx' isn't currently enabled ↓

cause Babel does not have JSX plugin configured.

fix

Ensure babel-preset-preact is added to presets array; also install @babel/plugin-transform-react-jsx if missing.

error Cannot find module 'babel-preset-preact' ↓

cause Package not installed or incorrectly referenced.

fix

Run npm install babel-preset-preact --save-dev and verify devDependencies.

Warnings

deprecated This preset is largely replaced by @babel/plugin-transform-react-jsx with pragma set to 'h'. ↓

fix Use @babel/plugin-transform-react-jsx directly: { plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h' }]] }

gotcha Preset only transforms JSX; you still need @babel/preset-env and other presets for modern JS. ↓

fix Combine with other presets: e.g., [['@babel/preset-env', { targets: '> 0.25%' }], 'preact']

gotcha If using Preact X with automatic JSX runtime, this preset is unnecessary. ↓

fix For Preact X, use @babel/plugin-transform-react-jsx with runtime: 'automatic' and importSource: 'preact'.

Install

npm install babel-preset-preact

yarn add babel-preset-preact

pnpm add babel-preset-preact

Imports

default

wrong

const babelPresetPreact = require('babel-preset-preact'); // Not the preset itself, wrong usage

correct

module.exports = { presets: ['preact'] }

CommonJS: preset is used as a string in config, not as a function directly.

h pragma

wrong

setting pragma to React.createElement

correct

/* @jsx h */ or `"presets": [["preact", { "pragma": "h" }]]`

Default pragma is 'h' for Preact; overriding is rarely needed.

Plugin option:
wrong
```
Using `import preset from 'babel-preset-preact'` in ESM
```
correct
```
In Babel config: { "presets": ["preact"] }
```
ESM usage: not directly importable; configure in .babelrc or babel.config.js.

Quickstart

Configure Babel to transform JSX into h() calls for Preact, then build a simple component.

// .babelrc
{
  "presets": [
    ["@babel/preset-env", { "targets": "last 2 versions" }],
    ["preact", { "pragma": "h" }]
  ]
}
// App.jsx
import { h, render } from 'preact';
const App = () => <div>Hello Preact</div>;
render(<App />, document.body);
// npm install @babel/core @babel/cli @babel/preset-env babel-preset-preact preact
// Then: npx babel src --out-dir dist