mxn-jsx-transpiler

0.8.7 verified Fri May 01 auth: no javascript

Transpiles JSX to regular JavaScript. Current stable version is 0.8.7. This package is a lightweight JSX-to-JavaScript transpiler (~6.1kb, ~2.5kb gzipped) that converts JSX syntax into function calls. It offers configuration options like factory function, property quoting, and indentation. Unlike Babel or TypeScript, it is minimal and focused on standalone JSX transpilation without a full AST transformation. It uses CommonJS and is intended for Node.js environments.

Common errors

error TypeError: transpile is not a function ↓

cause Incorrect import: using ES import syntax with a CJS module.

fix

Use const transpile = require('mxn-jsx-transpiler') instead of import.

error ReferenceError: h is not defined ↓

cause Using default factory 'h' without defining it in runtime.

fix

Either define a function h, or set factory option to your actual function, e.g., React.createElement.

error SyntaxError: Unexpected token '<' ↓

cause The input code contains JSX but the transpiler was not applied.

fix

Ensure you call transpile(code) before executing the code, and that the code string contains JSX.

Warnings

gotcha The package does not support ESM imports; use require() only. ↓

fix Use CommonJS require() or a bundler that can handle CJS.

gotcha The factory function default is 'h', not 'React.createElement'. Ensure your runtime provides this function. ↓

fix Set factory option to 'React.createElement' if using React.

gotcha Options must be passed as an object; positional arguments will be ignored. ↓

fix Always pass options as: transpile(code, { factory: '...' })

Install

npm install mxn-jsx-transpiler

yarn add mxn-jsx-transpiler

pnpm add mxn-jsx-transpiler

Imports

transpile

wrong

import transpile from 'mxn-jsx-transpiler'

correct

const transpile = require('mxn-jsx-transpiler')

CJS only; does not support ES module imports.

transpile (default export)
wrong
```
const { transpile } = require('mxn-jsx-transpiler')
```
correct
```
const transpile = require('mxn-jsx-transpiler')
```
The module exports a single function directly, not as a named export.
transpile options
wrong
```
transpile(code, 'h')
```
correct
```
transpile(code, { factory: 'h', quotePropNames: true })
```
Options are passed as an object, not positional arguments.

Quickstart

Shows how to require the module and transpile a simple JSX element with custom options.

const transpile = require('mxn-jsx-transpiler');

const code = `
const element = <div id="app">Hello, JSX!</div>;
`;

const options = {
  factory: 'h',
  quotePropNames: true,
  indent: '  ',
  lineEnd: '\n'
};

const result = transpile(code, options);
console.log(result);
// Output:
// const element = h("div", { "id": "app" }, "Hello, JSX!");