{"id":25818,"library":"jsx-transform-modern","title":"jsx-transform-modern","description":"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.","status":"maintenance","version":"2.0.3","language":"javascript","source_language":"en","source_url":"git://github.com/brenca/jsx-transform-modern","tags":["javascript","jsx","jsx-transform"],"install":[{"cmd":"npm install jsx-transform-modern","lang":"bash","label":"npm"},{"cmd":"yarn add jsx-transform-modern","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsx-transform-modern","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Uses acorn for JavaScript parsing","package":"acorn","optional":false}],"imports":[{"note":"Default import works as the module exports an object. In CJS, use require('jsx-transform-modern') directly.","wrong":"const jsx = require('jsx-transform-modern').default","symbol":"default","correct":"import jsx from 'jsx-transform-modern'"},{"note":"Named import is supported. CJS require also works but is not recommended for ESM.","wrong":"const fromString = require('jsx-transform-modern').fromString","symbol":"fromString","correct":"import { fromString } from 'jsx-transform-modern'"},{"note":"Same as fromString.","wrong":"const fromFile = require('jsx-transform-modern').fromFile","symbol":"fromFile","correct":"import { fromFile } from 'jsx-transform-modern'"}],"quickstart":{"code":"import { fromString, fromFile } from 'jsx-transform-modern';\n\n// Transform JSX string to JavaScript\nconst result = fromString('<h1>Hello World</h1>', {\n  factory: 'React.createElement'\n});\nconsole.log(result);\n// => React.createElement(\"h1\", null, [\"Hello World\"])\n\n// Transform from file\nconst fs = require('fs');\nfs.writeFileSync('input.jsx', '<App color=\"blue\"><Child /></App>');\nconst output = fromFile('input.jsx', {\n  factory: 'h',\n  arrayChildren: false\n});\nconsole.log(output);\n// => h(\"App\", { color: \"blue\" }, h(\"Child\", null))","lang":"javascript","description":"Shows basic usage of fromString and fromFile with custom factory and options."},"warnings":[{"fix":"Pass { arrayChildren: false } to match React behavior.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set { passUnknownTagsToFactory: true } to pass them as objects to factory, or { unknownTagsAsString: true } to pass as strings.","message":"Unknown tags (capitalized) are treated as functions by default unless passUnknownTagsToFactory is true. This may cause errors if you expect them to be strings.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set { ecmaversion: 2020 } or the appropriate ECMAScript version.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test your code when upgrading from 1.x; check for parsing errors or output differences.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you have set the spreadFn option, or use a babel-based transformer if spread is heavily used.","cause":"Acorn does not support spread attributes in JSX by default; the spreadFn option must be provided and acorn may need a plugin.","error":"SyntaxError: Unexpected token ... while parsing JSX"},{"fix":"Run 'npm install jsx-transform-modern' which will install acorn as a dependency.","cause":"acorn is a required dependency and must be installed alongside jsx-transform-modern.","error":"Error: Cannot find module 'acorn'"},{"fix":"Use import { fromString } from 'jsx-transform-modern' or const { fromString } = require('jsx-transform-modern').","cause":"The module was imported incorrectly (e.g., using default import when only named exports are available).","error":"TypeError: jsx.fromString is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}