jsx-transform-modern

2.0.3 verified Fri May 01 auth: no javascript maintenance

A standalone JSX transpiler that desugars JSX into JavaScript, decoupled from React. Version 2.0.3 is the current stable release; the project is in maintenance mode. It is a rewrite of jsx-transform using acorn for parsing, aiming to be a drop-in replacement with the same API. Unlike Babel's JSX plugin, it requires no React dependency and offers configurable factory functions, spread handling, and unknown tag patterns. It provides three main functions: fromString, fromFile, and browserifyTransform. It supports Node.js and browser environments, though browser usage typically requires a bundler. Releases are infrequent, with no recent updates. Preferred over babel for minimal, non-React JSX transformations.

Common errors

error SyntaxError: Unexpected token ... while parsing JSX ↓

cause Acorn does not support spread attributes in JSX by default; the spreadFn option must be provided and acorn may need a plugin.

fix

Ensure you have set the spreadFn option, or use a babel-based transformer if spread is heavily used.

error Error: Cannot find module 'acorn' ↓

cause acorn is a required dependency and must be installed alongside jsx-transform-modern.

fix

Run 'npm install jsx-transform-modern' which will install acorn as a dependency.

error TypeError: jsx.fromString is not a function ↓

cause The module was imported incorrectly (e.g., using default import when only named exports are available).

fix

Use import { fromString } from 'jsx-transform-modern' or const { fromString } = require('jsx-transform-modern').

Warnings

gotcha Default value for arrayChildren is true, which wraps children in an array. This differs from React's createElement which uses rest arguments. Set arrayChildren: false if using with React. ↓

fix Pass { arrayChildren: false } to match React behavior.

gotcha Unknown tags (capitalized) are treated as functions by default unless passUnknownTagsToFactory is true. This may cause errors if you expect them to be strings. ↓

fix Set { passUnknownTagsToFactory: true } to pass them as objects to factory, or { unknownTagsAsString: true } to pass as strings.

gotcha The module uses acorn for parsing; the ecmaversion option defaults to 8. If you use newer JS features (e.g., optional chaining), you must set ecmaversion to a higher number (e.g., 2020) or parsing may fail. ↓

fix Set { ecmaversion: 2020 } or the appropriate ECMAScript version.

breaking Version 2.x is a rewrite with acorn. It aims to be a drop-in replacement but there may be edge cases with parsing differences from the original jsx-transform. ↓

fix Test your code when upgrading from 1.x; check for parsing errors or output differences.

Install

npm install jsx-transform-modern

yarn add jsx-transform-modern

pnpm add jsx-transform-modern

Imports

default
wrong
```
const jsx = require('jsx-transform-modern').default
```
correct
```
import jsx from 'jsx-transform-modern'
```
Default import works as the module exports an object. In CJS, use require('jsx-transform-modern') directly.

fromString

wrong

const fromString = require('jsx-transform-modern').fromString

correct

import { fromString } from 'jsx-transform-modern'

Named import is supported. CJS require also works but is not recommended for ESM.

fromFile

wrong

const fromFile = require('jsx-transform-modern').fromFile

correct

import { fromFile } from 'jsx-transform-modern'

Same as fromString.

Quickstart

Shows basic usage of fromString and fromFile with custom factory and options.

import { fromString, fromFile } from 'jsx-transform-modern';

// Transform JSX string to JavaScript
const result = fromString('<h1>Hello World</h1>', {
  factory: 'React.createElement'
});
console.log(result);
// => React.createElement("h1", null, ["Hello World"])

// Transform from file
const fs = require('fs');
fs.writeFileSync('input.jsx', '<App color="blue"><Child /></App>');
const output = fromFile('input.jsx', {
  factory: 'h',
  arrayChildren: false
});
console.log(output);
// => h("App", { color: "blue" }, h("Child", null))