{"id":19324,"library":"babel-preset-preact","title":"babel-preset-preact","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/developit/babel-preset-preact","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-preact","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-preact","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-preact","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to actually transform JSX; the preset sets options but relies on this plugin.","package":"@babel/plugin-transform-react-jsx","optional":false}],"imports":[{"note":"CommonJS: preset is used as a string in config, not as a function directly.","wrong":"const babelPresetPreact = require('babel-preset-preact'); // Not the preset itself, wrong usage","symbol":"default","correct":"module.exports = { presets: ['preact'] }"},{"note":"Default pragma is 'h' for Preact; overriding is rarely needed.","wrong":"setting pragma to React.createElement","symbol":"h pragma","correct":"/* @jsx h */ or `\"presets\": [[\"preact\", { \"pragma\": \"h\" }]]`"},{"note":"ESM usage: not directly importable; configure in .babelrc or babel.config.js.","wrong":"Using `import preset from 'babel-preset-preact'` in ESM","symbol":"Plugin option: ","correct":"In Babel config: { \"presets\": [\"preact\"] }"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\n    [\"@babel/preset-env\", { \"targets\": \"last 2 versions\" }],\n    [\"preact\", { \"pragma\": \"h\" }]\n  ]\n}\n// App.jsx\nimport { h, render } from 'preact';\nconst App = () => <div>Hello Preact</div>;\nrender(<App />, document.body);\n// npm install @babel/core @babel/cli @babel/preset-env babel-preset-preact preact\n// Then: npx babel src --out-dir dist","lang":"javascript","description":"Configure Babel to transform JSX into h() calls for Preact, then build a simple component."},"warnings":[{"fix":"Use @babel/plugin-transform-react-jsx directly: { plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h' }]] }","message":"This preset is largely replaced by @babel/plugin-transform-react-jsx with pragma set to 'h'.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Combine with other presets: e.g., [['@babel/preset-env', { targets: '> 0.25%' }], 'preact']","message":"Preset only transforms JSX; you still need @babel/preset-env and other presets for modern JS.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Preact X, use @babel/plugin-transform-react-jsx with runtime: 'automatic' and importSource: 'preact'.","message":"If using Preact X with automatic JSX runtime, this preset is unnecessary.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure babel-preset-preact is added to presets array; also install @babel/plugin-transform-react-jsx if missing.","cause":"Babel does not have JSX plugin configured.","error":"Support for the experimental syntax 'jsx' isn't currently enabled"},{"fix":"Run `npm install babel-preset-preact --save-dev` and verify devDependencies.","cause":"Package not installed or incorrectly referenced.","error":"Cannot find module 'babel-preset-preact'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}