Registry / serialization / estree-util-build-jsx

estree-util-build-jsx

library3.0.1jsnpmunverified

estree-util-build-jsx is a utility designed to transform JSX nodes within an ESTree (Abstract Syntax Tree) into standard function calls, such as those used by `h` (hyperscript) functions for React, Preact, or custom renderers. This package currently stands at version 3.0.1, with recent major updates in 3.0.0 introducing breaking changes like ESM-only distribution and requiring Node.js 16+. Its release cadence is active, with consistent updates and bug fixes. A key differentiator is its focus on AST transformation rather than full code compilation, making it suitable for pipelines where an AST is already available (e.g., from Acorn or other parsers). Unlike comprehensive compilers like SWC or esbuild, it does not parse raw source code. It also has specific behavioral differences compared to Babel's JSX transform, such as explicit support for namespaces and different handling of `this` as a component.

serialization web-framework

npm install estree-util-build-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · ESTREE-UTIL-BUILD-

estree-util-build-jsx

serializationjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

buildJsx

✓ import { buildJsx } from 'estree-util-build-jsx'

✗ const buildJsx = require('estree-util-build-jsx')

Package is ESM-only since v2.0.0; CommonJS require() is not supported.

Options

✓ import type { Options } from 'estree-util-build-jsx'

✗ import { Options } from 'estree-util-build-jsx'

Type import for configuration; avoid importing as a value.

Runtime

✓ import type { Runtime } from 'estree-util-build-jsx'

✗ import { Runtime } from 'estree-util-build-jsx'

Type import for the JSX runtime configuration; avoid importing as a value.

This quickstart demonstrates parsing JSX with `acorn-jsx`, transforming the resulting ESTree using `buildJsx` to convert JSX elements into function calls, and then converting the modified tree back into JavaScript code.

import jsx from 'acorn-jsx'; import { fromJs } from 'esast-util-from-js'; import { buildJsx } from 'estree-util-build-jsx'; import { toJs } from 'estree-util-to-js'; // Simulate reading a JSX file content const doc = ` import x from 'xastscript'; console.log( <album id={123}> <name>Born in the U.S.A.</name> <artist>Bruce Springsteen</artist> <releasedate date="1984-04-06">April 6, 1984</releasedate> </album> ); console.log( <> {1 + 1} <self-closing /> <x name key="value" key={expression} {...spread} /> </> ); `; // Parse the JSX content into an ESTree const tree = fromJs(doc, { module: true, plugins: [jsx()] }); // Transform JSX nodes in the tree into function calls // The buildJsx function modifies the tree in place and yields undefined. buildJsx(tree, { pragma: 'x', pragmaFrag: 'null' }); // Convert the modified ESTree back to JavaScript code const transformedCode = toJs(tree).value; console.log(transformedCode);

Debug

Known issues

breakingVersion 3.0.0 updated the minimum Node.js requirement to 16. Older Node.js versions are no longer supported.

fix

Upgrade your Node.js environment to version 16 or newer. For projects requiring older Node.js, use a previous major version of `estree-util-build-jsx` (e.g., `2.x`).

affects: >=3.0.0

breakingThe package transitioned to ESM-only distribution. CommonJS `require()` statements will no longer work.

fix

Update your import statements to use ES modules (`import ... from 'pkg'`). Ensure your project is configured for ESM (e.g., `"type": "module"` in `package.json`).

affects: >=2.0.0

breakingThe `buildJsx` function no longer returns the transformed tree. It modifies the tree in place and yields `undefined`.

fix

After calling `buildJsx(tree, options)`, continue using the original `tree` object as it has been modified directly. Do not attempt to assign the return value of `buildJsx`.

affects: >=3.0.0

breakingThe `BuildJsxOptions` TypeScript type was removed. Use the `Options` type instead.

fix

Replace all occurrences of `BuildJsxOptions` with `Options` in your TypeScript code.

affects: >=3.0.0

gotchaThe package now uses the `exports` field in `package.json` for module resolution. Direct imports to internal or private paths within the package might break.

fix

Only use the officially exported symbols as documented in the API. Avoid importing from deep paths or relying on non-public APIs.

affects: >=3.0.0

Errors

Common errors & fixes

ERR_REQUIRE_ESM

Attempting to import `estree-util-build-jsx` using CommonJS `require()` in a Node.js environment.

fix

Change `const { buildJsx } = require('estree-util-build-jsx')` to `import { buildJsx } from 'estree-util-build-jsx'`. Ensure your project's `package.json` has `"type": "module"` or your file uses the `.mjs` extension.

TypeError: buildJsx is not a function

Incorrect import syntax for an ESM-only package, or attempting to use `buildJsx` as if it returns a value after v3.0.0.

fix

Verify the import is `import { buildJsx } from 'estree-util-build-jsx'`. If on v3.0.0+, remember that `buildJsx` modifies the tree in place and returns `undefined`, so don't assign its result.

ReferenceError: BuildJsxOptions is not defined

Using the deprecated `BuildJsxOptions` type after its removal in v3.0.0.

fix

Update the type reference from `BuildJsxOptions` to `Options`.

SyntaxError: Cannot use import statement outside a module

Using `import` syntax in a file that Node.js or your bundler interprets as a CommonJS module.

fix

Ensure the containing file is treated as an ES module by either naming it `.mjs` or adding `"type": "module"` to your nearest `package.json` file.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/syntax-tree/estree-util-build-jsx ↗

packagehttps://www.npmjs.com/package/estree-util-build-jsx ↗