babel-preset-rax

1.0.0-beta.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" ↓

cause Babel version mismatch: babel-preset-rax requires Babel 7, but Babel 6 is installed.

fix

Upgrade to Babel 7: npm install @babel/core @babel/cli --save-dev

error SyntaxError: Unexpected token < ↓

cause JSX syntax is not being transformed because babel-preset-rax is not configured correctly or missing from presets.

fix

Ensure .babelrc or babel.config.js includes 'babel-preset-rax' in presets and that Babel is run on the file.

error ReferenceError: createElement is not defined ↓

cause The default pragma 'createElement' is not imported; Rax createElement must be in scope.

fix

Add import { createElement } from 'rax'; at the top of your file, or change pragma to 'rax.createElement'.

Warnings

breaking Version 1.0.0-beta.0 is a beta; later releases (1.2.2) may have breaking changes in plugin compatibility or defaults. ↓

fix Use latest version (npm install babel-preset-rax@latest) and check changelog for breaking changes.

deprecated Using the env option in .babelrc for development presets is deprecated; pass options programmatically. ↓

fix Set development flag via JS config: { presets: [['babel-preset-rax', { development: process.env.NODE_ENV === 'development' }]] }

gotcha The default pragma is 'createElement', not 'React.createElement'. Forgetting to set pragma can cause missing createElement errors. ↓

fix Set pragma to 'createElement' (or 'dom' for Rax DOM) in preset options.

gotcha throwIfNamespace defaults to true; using XML namespaces (e.g., <f:image/>) will throw an error unless disabled. ↓

fix Set throwIfNamespace to false in options if XML namespaced tags are needed.

deprecated Package may not be actively maintained; last release 2020, and Rax ecosystem may have moved to other tools. ↓

fix Evaluate if babel-preset-rax is still necessary; consider using @babel/preset-react with custom pragma.

Install

npm install babel-preset-rax

yarn add babel-preset-rax

pnpm add babel-preset-rax

Imports

default preset
wrong
```
import babelPresetRax from 'babel-preset-rax'
```
correct
```
module.exports = { presets: ['babel-preset-rax'] }
```
This package is a Babel preset, not a JavaScript module — use it in Babel config files, not direct imports.

preset with options

wrong

require('babel-preset-rax')({ pragma: 'dom' })

correct

module.exports = { presets: [['babel-preset-rax', { pragma: 'dom' }]] }

Options are passed as an array to the preset key in Babel config, not by calling a function.

env-specific development

wrong

module.exports = { presets: [['babel-preset-rax', { development: true }]], env: { development: { presets: [['babel-preset-rax', { development: true }]] } } }

correct

module.exports = { presets: [['babel-preset-rax', { development: process.env.NODE_ENV === 'development' }]] }

Using the env option is deprecated; set development conditionally in the preset options directly.

Quickstart

Setup Babel with babel-preset-rax to transpile JSX in a Rax project, showing configuration and CLI usage.

// Install: npm install --save-dev babel-preset-rax @babel/core @babel/cli
// Create .babelrc
{
  "presets": [
    ["babel-preset-rax", {
      "pragma": "createElement",
      "pragmaFrag": "Fragment",
      "throwIfNamespace": false
    }]
  ]
}

// Input: index.jsx
function App() {
  return <div>Hello Rax</div>;
}
// Run: npx babel index.jsx --out-file index.js
// Output: transformed JS without JSX.