{"id":19326,"library":"babel-preset-rax","title":"babel-preset-rax","description":"Babel preset for compiling JSX in Rax applications, a React-like framework for cross-platform development (web, mini-programs, etc.). Current stable version is 1.0.0-beta.0, though later beta releases exist (e.g., 1.2.2). It includes plugins for JSX syntax, transformation, and display name, with optional development plugins for JSX self/source. Rax is maintained by Alibaba and focuses on performance and universal rendering. Key differentiator: tailored for Rax's custom JSX pragma (e.g., 'createElement' or 'dom') and fragment handling, with throwIfNamespace control.","status":"active","version":"1.0.0-beta.0","language":"javascript","source_language":"en","source_url":"https://github.com/alibaba/rax","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-rax","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-rax","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-rax","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for parsing JSX syntax","package":"@babel/plugin-syntax-jsx","optional":false},{"reason":"Transforms JSX into Rax createElement calls","package":"@babel/plugin-transform-react-jsx","optional":false},{"reason":"Adds displayName to components for debugging","package":"@babel/plugin-transform-react-display-name","optional":false}],"imports":[{"note":"This package is a Babel preset, not a JavaScript module — use it in Babel config files, not direct imports.","wrong":"import babelPresetRax from 'babel-preset-rax'","symbol":"default preset","correct":"module.exports = { presets: ['babel-preset-rax'] }"},{"note":"Options are passed as an array to the preset key in Babel config, not by calling a function.","wrong":"require('babel-preset-rax')({ pragma: 'dom' })","symbol":"preset with options","correct":"module.exports = { presets: [['babel-preset-rax', { pragma: 'dom' }]] }"},{"note":"Using the env option is deprecated; set development conditionally in the preset options directly.","wrong":"module.exports = { presets: [['babel-preset-rax', { development: true }]], env: { development: { presets: [['babel-preset-rax', { development: true }]] } } }","symbol":"env-specific development","correct":"module.exports = { presets: [['babel-preset-rax', { development: process.env.NODE_ENV === 'development' }]] }"}],"quickstart":{"code":"// Install: npm install --save-dev babel-preset-rax @babel/core @babel/cli\n// Create .babelrc\n{\n  \"presets\": [\n    [\"babel-preset-rax\", {\n      \"pragma\": \"createElement\",\n      \"pragmaFrag\": \"Fragment\",\n      \"throwIfNamespace\": false\n    }]\n  ]\n}\n\n// Input: index.jsx\nfunction App() {\n  return <div>Hello Rax</div>;\n}\n// Run: npx babel index.jsx --out-file index.js\n// Output: transformed JS without JSX.","lang":"javascript","description":"Setup Babel with babel-preset-rax to transpile JSX in a Rax project, showing configuration and CLI usage."},"warnings":[{"fix":"Use latest version (npm install babel-preset-rax@latest) and check changelog for breaking changes.","message":"Version 1.0.0-beta.0 is a beta; later releases (1.2.2) may have breaking changes in plugin compatibility or defaults.","severity":"breaking","affected_versions":"1.0.0-beta.0"},{"fix":"Set development flag via JS config: { presets: [['babel-preset-rax', { development: process.env.NODE_ENV === 'development' }]] }","message":"Using the env option in .babelrc for development presets is deprecated; pass options programmatically.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Set pragma to 'createElement' (or 'dom' for Rax DOM) in preset options.","message":"The default pragma is 'createElement', not 'React.createElement'. Forgetting to set pragma can cause missing createElement errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set throwIfNamespace to false in options if XML namespaced tags are needed.","message":"throwIfNamespace defaults to true; using XML namespaces (e.g., <f:image/>) will throw an error unless disabled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Evaluate if babel-preset-rax is still necessary; consider using @babel/preset-react with custom pragma.","message":"Package may not be actively maintained; last release 2020, and Rax ecosystem may have moved to other tools.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade to Babel 7: npm install @babel/core @babel/cli --save-dev","cause":"Babel version mismatch: babel-preset-rax requires Babel 7, but Babel 6 is installed.","error":"Error: Requires Babel \"^7.0.0-0\", but was loaded with \"6.26.3\""},{"fix":"Ensure .babelrc or babel.config.js includes 'babel-preset-rax' in presets and that Babel is run on the file.","cause":"JSX syntax is not being transformed because babel-preset-rax is not configured correctly or missing from presets.","error":"SyntaxError: Unexpected token <"},{"fix":"Add import { createElement } from 'rax'; at the top of your file, or change pragma to 'rax.createElement'.","cause":"The default pragma 'createElement' is not imported; Rax createElement must be in scope.","error":"ReferenceError: createElement is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}