jsx-to-js

1.0.1 verified Fri May 01 auth: no javascript abandoned

Transpile JSX to JS with non-standard syntax: ignores tag name capitalization (uses variable tracking), provides ES6-style parameter shorthand (defaults to variable with same name instead of true). Unmaintained since 2015; version 1.0.1 is the latest. Different from standard JSX transpilers (e.g., Babel) in semantics; useful for custom JSX runtimes that want shorthand syntax. No TypeScript definitions, no updates, likely abandonware.

Common errors

error TypeError: JSX is not a function ↓

cause Using ES module import syntax (import JSX from 'jsx-to-js') with a CommonJS-only package.

fix

Use const JSX = require('jsx-to-js') instead.

error Cannot read property 'type' of undefined ↓

cause Passing a JSX string to the function instead of a parsed AST object.

fix

Preparse your JSX string with a parser like jsx-parser or acorn-jsx before passing to JSX().

error Unexpected token ↓

cause Using standard JSX syntax (e.g., uppercase components) expecting default behavior; jsx-to-js uses variable tracking and ignores case.

fix

Ensure all component names are defined as variables in scope; use lowercase for HTML elements if needed.

Warnings

breaking Non-standard JSX syntax: tag name case is ignored. Variables used for component detection instead of capitalization. ↓

fix Ensure all components are in scope as variables; do not rely on capitalization to distinguish HTML tags from components.

breaking ES6-style parameter shorthand: attribute without value defaults to variable with same name, not true. ↓

fix Use explicit attribute values (e.g., onMousedown={true}) if you need standard behavior, or rename variables to match attribute names.

deprecated Package has no updates since 2015, no TypeScript types, no ESM support. ↓

fix Consider using Babel's @babel/plugin-transform-react-jsx or similar for standard behavior.

gotcha The package does not parse JSX; it requires a pre-parsed JSX AST. You need a separate parser (like jsx-parser or acorn-jsx). ↓

fix Pass a valid JSX AST object, not a string.

gotcha The exported function is named 'JSX' but is not the default export; only works with CommonJS require. ↓

fix Use const JSX = require('jsx-to-js') instead of import.

Install

npm install jsx-to-js

yarn add jsx-to-js

pnpm add jsx-to-js

Imports

JSX
wrong
```
import JSX from 'jsx-to-js'
```
correct
```
const JSX = require('jsx-to-js')
```
Package uses CommonJS; no default export for ESM. Only compatible with Node.js require.
transform (no default export)
```
const { transform } = require('jsx-to-js')
```
No standard named export; the module exports a single function that expects a JSX AST node.
JSX (as a function)
```
const JSX = require('jsx-to-js'); const ast = JSX(parse('<div/>'))
```
The exported function is used to transform a parsed JSX AST to a JavaScript AST.

Quickstart

Shows how to transform a JSX AST (parsed externally) into a JavaScript AST using jsx-to-js.

const parse = require('jsx-parser') // hypothetical parser
const JSX = require('jsx-to-js')

// Parse JSX string to AST (you need a JSX parser yourself)
const jsxAst = parse('<div className="foo" onClick={handleClick}/>')

// Transform to JS AST
const jsAst = JSX(jsxAst)

console.log(JSON.stringify(jsAst, null, 2))
// Output: JSX("div", {className: "foo", onClick: handleClick})