{"id":13154,"library":"estree-util-build-jsx","title":"ESTree JSX Transform Utility","description":"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.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/syntax-tree/estree-util-build-jsx","tags":["javascript","estree","ast","ecmascript","tree","jsx","xml","build","typescript"],"install":[{"cmd":"npm install estree-util-build-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add estree-util-build-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add estree-util-build-jsx","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only since v2.0.0; CommonJS require() is not supported.","wrong":"const buildJsx = require('estree-util-build-jsx')","symbol":"buildJsx","correct":"import { buildJsx } from 'estree-util-build-jsx'"},{"note":"Type import for configuration; avoid importing as a value.","wrong":"import { Options } from 'estree-util-build-jsx'","symbol":"Options","correct":"import type { Options } from 'estree-util-build-jsx'"},{"note":"Type import for the JSX runtime configuration; avoid importing as a value.","wrong":"import { Runtime } from 'estree-util-build-jsx'","symbol":"Runtime","correct":"import type { Runtime } from 'estree-util-build-jsx'"}],"quickstart":{"code":"import jsx from 'acorn-jsx';\nimport { fromJs } from 'esast-util-from-js';\nimport { buildJsx } from 'estree-util-build-jsx';\nimport { toJs } from 'estree-util-to-js';\n\n// Simulate reading a JSX file content\nconst doc = `\n  import x from 'xastscript';\n  console.log(\n    <album id={123}>\n      <name>Born in the U.S.A.</name>\n      <artist>Bruce Springsteen</artist>\n      <releasedate date=\"1984-04-06\">April 6, 1984</releasedate>\n    </album>\n  );\n  console.log(\n    <>\n      {1 + 1}\n      <self-closing />\n      <x name key=\"value\" key={expression} {...spread} />\n    </>\n  );\n`;\n\n// Parse the JSX content into an ESTree\nconst tree = fromJs(doc, { module: true, plugins: [jsx()] });\n\n// Transform JSX nodes in the tree into function calls\n// The buildJsx function modifies the tree in place and yields undefined.\nbuildJsx(tree, { pragma: 'x', pragmaFrag: 'null' });\n\n// Convert the modified ESTree back to JavaScript code\nconst transformedCode = toJs(tree).value;\n\nconsole.log(transformedCode);\n","lang":"typescript","description":"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."},"warnings":[{"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`).","message":"Version 3.0.0 updated the minimum Node.js requirement to 16. Older Node.js versions are no longer supported.","severity":"breaking","affected_versions":">=3.0.0"},{"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`).","message":"The package transitioned to ESM-only distribution. CommonJS `require()` statements will no longer work.","severity":"breaking","affected_versions":">=2.0.0"},{"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`.","message":"The `buildJsx` function no longer returns the transformed tree. It modifies the tree in place and yields `undefined`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Replace all occurrences of `BuildJsxOptions` with `Options` in your TypeScript code.","message":"The `BuildJsxOptions` TypeScript type was removed. Use the `Options` type instead.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Only use the officially exported symbols as documented in the API. Avoid importing from deep paths or relying on non-public APIs.","message":"The package now uses the `exports` field in `package.json` for module resolution. Direct imports to internal or private paths within the package might break.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to import `estree-util-build-jsx` using CommonJS `require()` in a Node.js environment.","error":"ERR_REQUIRE_ESM"},{"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.","cause":"Incorrect import syntax for an ESM-only package, or attempting to use `buildJsx` as if it returns a value after v3.0.0.","error":"TypeError: buildJsx is not a function"},{"fix":"Update the type reference from `BuildJsxOptions` to `Options`.","cause":"Using the deprecated `BuildJsxOptions` type after its removal in v3.0.0.","error":"ReferenceError: BuildJsxOptions is not defined"},{"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.","cause":"Using `import` syntax in a file that Node.js or your bundler interprets as a CommonJS module.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}