Registry / web-framework / babel-preset-preact

babel-preset-preact

library2.0.0jsnpmunverified

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.

web-framework http-networking

npm install babel-preset-preact

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-PREAC

babel-preset-preact

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

h pragma

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

✗ setting pragma to React.createElement

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

Plugin option:

✓ In Babel config: { "presets": ["preact"] }

✗ Using `import preset from 'babel-preset-preact'` in ESM

ESM usage: not directly importable; configure in .babelrc or babel.config.js.

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

Debug

Known issues

deprecatedThis 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' }]] }

affects: >=1.0.0

gotchaPreset 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']

affects: >=1.0.0

gotchaIf 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'.

affects: >=2.0.0

Errors

Common errors & fixes

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

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.

Cannot find module 'babel-preset-preact'

Package not installed or incorrectly referenced.

fix

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

@babel/plugin-transform-react-jsxrequiredRequired to actually transform JSX; the preset sets options but relies on this plugin.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/developit/babel-preset-preact ↗

packagehttps://www.npmjs.com/package/babel-preset-preact ↗