@babel/plugin-syntax-jsx

What is @babel/plugin-syntax-jsx?

The @babel/plugin-syntax-jsx npm package allows Babel to parse JSX syntax. JSX is a syntax extension for JavaScript, commonly used with React to describe what the UI should look like. By enabling this plugin, Babel can understand and process JSX syntax, but it does not transform it. To transform JSX, you would need to use another plugin like @babel/plugin-transform-react-jsx.

What are @babel/plugin-syntax-jsx's main functionalities?

JSX Parsing

This plugin allows Babel to parse JSX syntax like the one in the code sample, which represents a React element.

const element = <div>Hello, world!</div>;

Other packages similar to @babel/plugin-syntax-jsx

@babel/plugin-transform-react-jsx

This package not only parses JSX syntax but also transforms it into React.createElement calls, making it suitable for use in a React application.

babel-preset-react

This is a Babel preset for all React plugins, including JSX syntax parsing and transformation. It is a more comprehensive package for React development.

babel-plugin-transform-vue-jsx

Similar to the JSX transformation plugin for React, this plugin is tailored for Vue.js and transforms JSX into Vue.js render functions.

README

@babel/plugin-syntax-jsx

Allow parsing of jsx

See our website @babel/plugin-syntax-jsx for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-syntax-jsx

or using yarn:

yarn add @babel/plugin-syntax-jsx --dev

Changelog

v7.27.1 (2025-04-30)

:eyeglasses: Spec Compliance

• babel-parser
  • #17254 Allow using of as lexical declaration within for (@JLHwung)
  • #17230 Disallow get/set in TSPropertySignature (@JLHwung)
• babel-parser, babel-types
  • #17193 Stricter TSImportType options parsing (@JLHwung)

:bug: Bug Fix

• babel-plugin-proposal-destructuring-private, babel-plugin-proposal-do-expressions, babel-traverse
  • #17137 fix: do expressions should allow early exit (@kermanx)
• babel-helper-wrap-function, babel-plugin-transform-async-to-generator
  • #17251 Fix: propagate argument evaluation errors through async promise chain (@magic-akari)
• babel-helper-remap-async-to-generator, babel-plugin-transform-async-to-generator
  • #17231 fix apply()/call() annotated as pure (@Lacsw)
• babel-helper-fixtures, babel-parser
  • #17233 Create ChainExpression within TSInstantiationExpression (@JLHwung)
• babel-generator, babel-parser
  • #17226 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 2) (@JLHwung)
• babel-parser
  • #17224 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 1) (@JLHwung)
  • #17080 Fix start of TSParameterProperty (@JLHwung)
• babel-compat-data, babel-preset-env
  • #17228 Update firefox bugfix compat data (@JLHwung)
• babel-traverse
  • #17156 fix: Objects and arrays with multiple references should not be evaluated (@liuxingbaoyu)
• babel-generator
  • #17216 Fix: support const type parameter in generator (@JLHwung)

:nail_care: Polish

• babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-decorators, babel-plugin-transform-arrow-functions, babel-plugin-transform-class-properties, babel-plugin-transform-destructuring, babel-plugin-transform-object-rest-spread, babel-plugin-transform-optional-chaining, babel-plugin-transform-parameters, babel-traverse
  • #17221 Reduce generated names size for the 10th-11th (@nicolo-ribaudo)

:house: Internal

• babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #17263 Remove unused regenerator-runtime dep in @babel/runtime (@nicolo-ribaudo)
• babel-compat-data, babel-preset-env
  • #17256 Tune plugin compat data (@JLHwung)
• babel-compat-data, babel-standalone
  • #17236 migrate babel-compat-data build script to mjs (@JLHwung)
• Other
  • #17232 Bump typescript-eslint to 8.29.1 (@JLHwung)
  • #17219 test: add basic typescript-eslint integration tests (@JLHwung)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-register
  • #16844 Migrate @babel/register to cts (@liuxingbaoyu)
• babel-cli, babel-compat-data, babel-core, babel-generator, babel-helper-compilation-targets, babel-helper-fixtures, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-plugin-test-runner, babel-helper-transform-fixture-test-runner, babel-helpers, babel-node, babel-parser, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-react-display-name, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-plugin-transform-typeof-symbol, babel-plugin-transform-typescript, babel-preset-env, babel-register, babel-standalone, babel-types
  • #17207 Enforce node protocol import (@JLHwung)
• babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)

:microscope: Output optimization

• babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs3
  • #16538 Reduce interopRequireWildcard size (@liuxingbaoyu)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17213 Reduce regeneratorRuntime size (@liuxingbaoyu)