{"id":19336,"library":"babel-preset-solid","title":"babel-preset-solid","description":"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.","status":"active","version":"1.9.12","language":"javascript","source_language":"en","source_url":"https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-solid","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-solid","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-solid","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: required for JSX runtime and reactivity primitives","package":"solid-js","optional":false},{"reason":"peer dependency: required for Babel transformation pipeline","package":"@babel/core","optional":false}],"imports":[{"note":"This package is a Babel preset, not a JS module. It is used in Babel config files via CommonJS require.","wrong":"import presets from 'babel-preset-solid'","symbol":"default","correct":"module.exports = { presets: ['babel-preset-solid'] }"},{"note":"The h function is auto-imported by babel-preset-solid; manual import is not needed but possible for direct usage.","wrong":"import { h } from 'solid-js'","symbol":"solid-js/h","correct":"import { h } from 'solid-js/h'"},{"note":"jsxDEV is an internal runtime symbol injected by Babel; never import it manually.","wrong":"import { jsxDEV } from 'solid-js'","symbol":"jsxDEV","correct":"/* handled automatically by Babel */"}],"quickstart":{"code":"// Install\n// npm install --save-dev babel-preset-solid @babel/core\n// npm install solid-js\n\n// babel.config.cjs\nmodule.exports = {\n  presets: ['babel-preset-solid']\n};\n\n// App.jsx\nimport { createSignal } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Count: {count()}\n    </button>\n  );\n}\n\nexport default Counter;","lang":"javascript","description":"Shows minimal Babel config to enable Solid JSX transformation and a simple counter component."},"warnings":[{"fix":"Update to babel-preset-solid@^2.0.0-beta.0 or later.","message":"babel-preset-solid v1.x is deprecated in favor of v2.0.0-beta","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Remove any manual import of jsx/jsxDEV and rely on the Babel preset.","message":"The preset automatically imports the JSX runtime; do not manually import 'jsx' or 'jsxDEV' from solid-js","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use babel-preset-solid@^1.x for Solid 1.x projects.","message":"Solid 2.0 changes the JSX runtime; babel-preset-solid v2 is not backward-compatible with Solid 1.x","severity":"breaking","affected_versions":">=2.0.0-beta.0"},{"fix":"Upgrade to @babel/core@^7.0.0.","message":"This preset only works with Babel 7 or later; Babel 6 is not supported","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install solid-js","cause":"solid-js is not installed in node_modules","error":"Error: Cannot find module 'solid-js' Require stack: ..."},{"fix":"Ensure babel-preset-solid is in your presets array and that Babel is configured correctly.","cause":"Babel preset not applied; JSX is not transformed","error":"SyntaxError: Unexpected token '<'"},{"fix":"npm install --save-dev babel-preset-solid","cause":"babel-preset-solid is not installed as a devDependency","error":"Module not found: Can't resolve 'babel-preset-solid'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}