{"id":12784,"library":"acorn-jsx","title":"Acorn JSX Parser Plugin","description":"acorn-jsx is a plugin for the Acorn JavaScript parser that provides capabilities to parse React.js JSX syntax. It transforms JSX source code into an Abstract Syntax Tree (AST), which is then consumed by various language tools and transpilers like Babel and Buble. The current stable version is 5.3.2. This package maintains a moderate release cadence, often aligning with updates to the Acorn parser itself or changes in the JSX specification. Its key differentiators include its small footprint, speed, and JavaScript-only implementation, making it a widely adopted core component for JSX parsing in the JavaScript ecosystem. It strictly focuses on parsing to AST, rather than performing any transpilation to ES5-compliant JavaScript.","status":"active","version":"5.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/acornjs/acorn-jsx","tags":["javascript"],"install":[{"cmd":"npm install acorn-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add acorn-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add acorn-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core JavaScript parser that acorn-jsx extends. Required as a peer dependency.","package":"acorn","optional":false}],"imports":[{"note":"For acorn-jsx@5.x, Acorn is typically consumed via CommonJS `require` in Node.js environments. While newer Acorn versions may support ESM, `acorn-jsx` examples and typical usage patterns still lean heavily on `require`.","wrong":"import * as acorn from 'acorn';","symbol":"acorn","correct":"const acorn = require('acorn');"},{"note":"The plugin function is exposed as the CommonJS default export. Ensure you use `require` for consistent behavior with `acorn-jsx@5.x`.","wrong":"import jsx from 'acorn-jsx';","symbol":"jsx","correct":"const jsx = require('acorn-jsx');"},{"note":"The `extend` method is a static method on the `acorn.Parser` class, not directly on the `acorn` module itself. Always call the `jsx` plugin function to get the actual extension object.","wrong":"acorn.extend(jsx());","symbol":"Parser.extend","correct":"acorn.Parser.extend(jsx());"}],"quickstart":{"code":"const acorn = require('acorn');\nconst jsx = require('acorn-jsx');\n\n// Extend the Acorn parser with the JSX plugin\nacorn.Parser.extend(jsx()).parse(\n  `function MyComponent({ name }) {\n    return <div className=\"greeting\">Hello, {name}!</div>;\n  }`,\n  { sourceType: 'module' } // Important for modern JS parsing\n);\n\nconsole.log('Successfully parsed JSX with acorn-jsx!');\n\n// Example with custom options:\nconst astWithNoNamespaces = acorn.Parser.extend(jsx({ allowNamespaces: false })).parse(\n  `<MyComponent data-attr='value'></MyComponent>`\n);\n// console.log(JSON.stringify(astWithNoNamespaces, null, 2));","lang":"javascript","description":"Demonstrates how to load the `acorn` parser and extend it with the `acorn-jsx` plugin to parse a JSX code snippet into an AST."},"warnings":[{"fix":"Ensure that `}` and `>` characters within JSX text are properly escaped (e.g., `{'}'}` or `&gt;`) if they are not intended to be part of JSX expressions or tags. Review existing JSX text for compliance.","message":"As of `acorn-jsx@5.2.0`, direct unescaped `}` and `>` characters are forbidden in JSX text content, aligning with the JSX specification. Previously, this was loosely allowed but could lead to malformed ASTs.","severity":"breaking","affected_versions":">=5.2.0"},{"fix":"Avoid using mixed XML namespaces and object-style access in tag names. If you absolutely require this non-standard behavior, you can explicitly enable it by passing `{ allowNamespacedObjects: true }` to the `jsx()` plugin function.","message":"The syntax allowing a mix of XML namespaces and object-style access in tag names (e.g., `<namespace:Object.Property />`) was deprecated in `acorn-jsx@3.0` due to not being part of the official JSX specification.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"If your application does not use JSX namespaces and you want to prohibit them (e.g., for stricter parsing or to prevent unexpected syntax), explicitly pass `{ allowNamespaces: false }` to the `jsx()` plugin function when extending the parser.","message":"By default, `acorn-jsx` enables support for XML namespaces (`allowNamespaces: true`) for spec compliance. However, many React applications do not utilize JSX namespaces, and this default might not be desired.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install `acorn` explicitly via `npm install acorn` or `yarn add acorn`, ensuring the installed version matches the peer dependency range specified by `acorn-jsx`.","message":"`acorn-jsx` is a plugin and requires `acorn` as a peer dependency. Ensure that a compatible version of `acorn` (e.g., `^6.0.0 || ^7.0.0 || ^8.0.0` for `acorn-jsx@5.x`) is installed in your project.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Escape special characters like `}` or `>` in JSX text (e.g., by wrapping them in `{}` as `{'}'}` or using HTML entities like `&gt;`) or ensure they are part of valid JSX expressions/tags.","cause":"Often occurs when JSX content contains an unescaped `}` or `>` character in text context, which became a parsing error in `acorn-jsx@5.2.0`.","error":"SyntaxError: Unexpected token (\\d:\\d)"},{"fix":"Verify that `const acorn = require('acorn');` is correctly executed and that you are calling `jsx()` as `acorn.Parser.extend(jsx()).parse(...)`.","cause":"This usually means that the `acorn` module was not correctly loaded or `acorn-jsx` was not properly imported/called before attempting to extend the parser.","error":"TypeError: acorn.Parser.extend is not a function"},{"fix":"If this syntax is absolutely necessary (though not spec-compliant), pass `{ allowNamespacedObjects: true }` to the `jsx()` plugin function: `acorn.Parser.extend(jsx({ allowNamespacedObjects: true }))`.","cause":"Attempting to parse deprecated XML namespace with object-style access syntax without enabling `allowNamespacedObjects` option.","error":"SyntaxError: Identifier expected (\\d:\\d) (e.g., for <namespace:Object.Property />)"},{"fix":"Install a compatible version of `acorn` using `npm install acorn@^8` (or `^6`, `^7` depending on preference) to satisfy the peer dependency warning.","cause":"The required peer dependency `acorn` is either missing or an incompatible version is installed.","error":"npm WARN acorn-jsx@5.3.2 requires a peer of acorn@^6.0.0 || ^7.0.0 || ^8.0.0 but none is installed."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null}