">" is greater than.
+"{'>'}" is greater than.
``` **Notes**: This is technically a spec compliance fix because the [JSX specification](https://facebook.github.io/jsx/#prod-JSXTextCharacter) already forbids them. However, we have chosen to postpone it until Babel 8 because it could break someone's code. ### `@babel/generator` {#babel-generator}  - Remove the `jsonCompatibleStrings` option ([#9943](https://github.com/babel/babel/issues/9943), [#12477](https://github.com/babel/babel/pull/12477)) **Migration**: `@babel/generator` allows to specify options for [jsesc](https://github.com/mathiasbynens/jsesc), a library used to escape printed values. If you are using the `jsonCompatibleStrings` option, you can replace it with `jsescOption: { json: true }`.  - Output non-ASCII characters as-is in string literals ([#12675](https://github.com/babel/babel/pull/12675)) If you are using any one of `@babel/cli`, webpack, Rollup, or other Node.js powered bundlers, the transformed code is always encoded with `utf-8` and your app will not be affected. The issue only affects if you are manually calling the `babel.transform` API and your web server is not serving js files in the `utf8` encoding. **Migration**: Ensure your server is always serving js files in the `utf8` encoding. If you can not control the server output, specify the `charset` attribute of the `script` tag in the html files. ```html ``` You can also restore to the Babel 7 behaviour by setting ```js title="babel.config.js" { generatorOpts: { jsescOption: { minimal: false } } } ``` ### `@babel/preset-env` {#babel-preset-env} :::note `@babel/preset-env`'s `targets` option inherits its behavior from the top-level `targets` option, so make sure to check the [@babel/core](#babel-core) section. :::  - The `loose` and `spec` options have been removed ([#16043](https://github.com/babel/babel/pull/16043)) **Migration**: You can use the [`assumptions`](./assumptions.md) top-level option instead. See ["Migrating from @babel/preset-env's "loose" and "spec" modes"](./assumptions.md#migrating-from-babelpreset-envs-loose-and-spec-modes) for the ready-to-copy equivalent configuration. - The `corejs` option must specify the minor version of core-js 3 ([#16095](https://github.com/babel/babel/pull/16095)) In Babel 7, the recommended `corejs` option was `corejs: 3`. However, such option implies that Babel is compiling with features available in `corejs: "3.0"`, which was published in 2019 and missing many latest ECMAScript features. **Migration**: Specify the minor version of core-js 3 that you use to ensure latest features will be polyfilled if required. For example, ```js title=babel.config.mjs import corejsPackage from "core-js/package.json" with { type: "json" } export default { "presets": [[ "@babel/preset-env", { "corejs": corejsPackage.version } ]] } ``` If your are authoring a library that depends on `core-js`, the optimal `corejs` version should be the first version available in the `dependencies` of your library's `package.json`.  - `modules: "auto"` defaults to assuming that ESM is supported rather than not ([#18069](https://github.com/babel/babel/pull/18069)) This change will not affect you if you are using Babel through other tools, such us Webpack or Rollup, as they already specify to Babel that they do support ESM. **Migration**: If you need to transpile to CommonJS, either pass the `modules: "commonjs"` option to `@babel/preset-env`, or use the `@babel/plugin-transform-commonjs` plugin. - `include` and `exclude` respect renamed package names ([#15576](https://github.com/babel/babel/pull/15576)) **Migration**: If `include` or `exclude` contain any plugins mentioned in the [Packages Renames section](./v8-migration.md#renamed-packages), change it to the new name. For example, ```diff title="babel.config.json" { "presets": [[ "@babel/preset-env", { - "include": ["proposal-optional-chaining"] + "include": ["transform-optional-chaining"] } ]] } ```  - The `bugfixes` options has been removed ([#13866](https://github.com/babel/babel/pull/13866), [#17078](https://github.com/babel/babel/pull/17078)) **Migration**: You will probably be fine with the new behaviour as Babel now tries to compile the broken syntax to the closest _non-broken modern syntax_ supported by your target browsers. If anyhow you want to restore the Babel 7 behaviour for debug purpose, you can specify the [`exclude` option](./preset-env.md#exclude): `{ exclude: ["bugfix/.+"] }` to explicitly exclude the bugfixes plugins. Note that doing so will bloat the output as Babel has to compile features that, if not of some specific bug, would be generally supported by your targets. - Removed syntax plugins can not be used in `include` and `exclude` ([#15810](https://github.com/babel/babel/pull/15810)) **Migration**: You can safely remove them if you are using any of [syntax plugins listed above](#syntax-plugins) in the `include` and `exclude` options. ### `@babel/preset-react` and `@babel/plugin-transform-react-jsx` {#babel-preset-react} :::note `@babel/parser` also includes some JSX-related breaking changes, so make sure to check the [@babel/parser](#babel-parser) section. :::  - [Use the new JSX implementation by default](https://github.com/babel/babel/pull/11154#issuecomment-591188203) ([#12630](https://github.com/babel/babel/pull/12630)) **Migration**: If you are using a modern version of React or Preact, it should work without any configuration changes. Otherwise, you can pass the [`runtime: "classic"`](preset-react.md#runtime) option to `@babel/preset-react` or `@babel/plugin-transform-react-jsx` to be explicit about your usage of `createElement` (or the equivalent function in other libraries). - Make the `development` option default to the configured environment ([#16927](https://github.com/babel/babel/pull/16927)) Note that Babel's environment, set through [`envName` option](./options.md#envname), defaults to `process.env.BABEL_ENV || process.env.NODE_ENV || "development"`: if you don't specify neither the `envName` option nor the `BABEL_ENV` or `NODE_ENV` environment variables, it will default to `development`. **Migration**: In production builds, set the `BABEL_ENV` or `NODE_ENV` environment variables, or the `envName` Babel option, to `"production"`. If you want to run _only this preset_ in production mode, then you can explicitly set the `development` option to `false`.  - Remove `useSpread` and `useBuiltIns` options ([#12593](https://github.com/babel/babel/pull/12593)) **Migration**: Babel 8 always compiles JSX spread elements to object spread: ```jsx title="input.jsx" // transforms to jsx("div", { ...props }) ``` If your app targets to modern browsers released after 2019, you can safely remove these options as object spread has less code footprint. If your code needs to run in an environment which doesn't support object spread, you can either use `@babel/preset-env` (recommended) or `@babel/plugin-transform-object-rest-spread`. If you want to transpile `Object.assign` down, you also need to enable `@babel/plugin-transform-object-assign`. In Babel 7.7.0, you can opt into the Babel 8 behavior by using the `useSpread: true` option. - Type check input options ([#12460](https://github.com/babel/babel/pull/12460)) **Migration**: The preset will also report invalid option names. Refer to the [docs](./preset-react.md#options) and ensure valid usage. - Stop generating `__source` and `__self` in development mode by default ([#17571](https://github.com/babel/babel/issues/17571)) React 19.2 removed the `source` and `self` parameters from `jsxDEV`. Babel 8 no longer passes them when calling `jsxDEV` in development mode. **Migration**: If you are using React 19.2 or later you don't need to do anything. If you are using an older React version or a custom JSX runtime that still expects these arguments, set `developmentSourceSelf` to `true` in the preset, or `sourceSelf` to `true` in `@babel/plugin-transform-react-jsx-development`: ```diff title="babel.config.json" { "presets": [ - ["@babel/preset-react", { "development": true }] + ["@babel/preset-react", { "development": true, "developmentSourceSelf": true }] ] } ``` ```diff title="babel.config.json" { "plugins": [ - "@babel/plugin-transform-react-jsx-development", + ["@babel/plugin-transform-react-jsx-development", { "sourceSelf": true }] ] } ```  - Disallow `filter` option in automatic runtime ([#15068](https://github.com/babel/babel/pull/15068/commits/e2dd3be6e38b0254bc69a8e52c265214235829c6)) **Migration**: The `filter` option can only be used with the `classic` runtime. If you have switched to `automatic` runtime, you can safely remove this option. Otherwise please specify `runtime: "classic"`. ### `@babel/preset-typescript` {#babel-preset-typescript} :::note Make sure to also check the [@babel/plugin-transform-typescript](#babel-plugin-transform-typescript) changes changes, since it's what this preset uses under the hood. :::  - Remove `isTSX` and `allExtensions` options ([#14955](https://github.com/babel/babel/pull/14955)) **Migration**: - `isTSX: true` and `allExtensions: true` If you are already using `@babel/preset-react`, `@babel/plugin-transform-react-jsx` or any other third-party jsx presets such as `@vue/babel-preset-jsx`, and you want to transpile `.tsx` files, you can safely remove these two options. Babel 8 will automatically handle `.tsx` files using this preset and the other JSX plugin. ```diff title="babel.config.json" { "presets": [ ["@babel/preset-react", { "runtime": "automatic" }], - ["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }] + ["@babel/preset-typescript"] ] } ``` If you want to transpile files other than `.tsx`, such as `.vue`, use `ignoreExtensions: true`: ```diff title="babel.config.js" { overrides: [{ include: /\.vue$/, presets: [ ['@babel/preset-typescript', { - allExtensions: true, isTSX: true + ignoreExtensions: true }] ] }] } ``` If you want to preserve the JSX format but transpile the TypeScript part, use `ignoreExtensions: true` and enable the [`@babel/plugin-syntax-jsx`](./plugin-syntax-jsx.md) plugin. - `isTSX: false` and `allExtensions: true` Use `ignoreExtensions: true`, see the example above. - `isTSX: false` and `allExtensions: false` You can safely remove them.  - Remove `allowDeclareFields` option ([#12461](https://github.com/babel/babel/pull/12461)) **Migration**: Remove the option from your config, since it's now enabled by default. - Type check input options ([#12460](https://github.com/babel/babel/pull/12460)) **Migration**: The preset will also report invalid option names. Refer to the [docs](./preset-typescript.md#options) and ensure valid usage. For example, `runtime` is not a valid `preset-typescript` option and thus should be removed. ### `@babel/plugin-transform-typescript` {#babel-plugin-transform-typescript}  - [Preserve uninitialized class fields](https://github.com/babel/babel/issues/10039) ([#12461](https://github.com/babel/babel/pull/12461)) **Migration**: If you don't want fields to be initialized to `undefined` use the `declare` syntax, introduced in TypeScript 3.7: ```ts title="input.ts" class A { foo: string | void; // initialized to undefined declare bar: number; // type-only, will be removed } ```  - Remove `allowDeclareFields` option ([#12461](https://github.com/babel/babel/pull/12461)) **Migration**: Remove the option from your config, since it's now enabled by default. ### `@babel/plugin-syntax-typescript` {#babel-plugin-syntax-typescript}  - Remove `isTSX` option ([#14955](https://github.com/babel/babel/pull/14955)) **Migration**: If you are using `isTSX: true`, remove this option and enable the [`@babel/plugin-syntax-jsx`](./plugin-syntax-jsx.md) plugin: ```diff title="babel.config.json { "plugins": [ - ["@babel/plugin-syntax-typescript", { "isTSX": true }] + "@babel/plugin-syntax-typescript", + "@babel/plugin-syntax-jsx" ] } ``` If you are using `isTSX: false`, you can safely remove it. ### `@babel/preset-flow` {#babel-preset-flow} :::note Make sure to also check the [@babel/plugin-transform-flow-strip-types](#babel-plugin-transform-flow-strip-types) changes, since it's what this preset uses under the hood. :::  - Type check input options ([#12460](https://github.com/babel/babel/pull/12460)) **Migration**: The preset will also report invalid option names. Refer to the [docs](./preset-flow.md#options) and ensure valid usage. - Remove the `allowDeclareFields` and `enums` options ([#12457](https://github.com/babel/babel/pull/12457), [#16792](https://github.com/babel/babel/pull/16792)) **Migration**: Remove these options from your config, since they are now enabled by default. ### `@babel/plugin-transform-flow-strip-types` {#babel-plugin-transform-flow-strip-types}  - [Preserve uninitialized class fields](https://github.com/babel/babel/issues/10039) ([#12457](https://github.com/babel/babel/pull/12457)) **Migration**: Use the new `declare` syntax, introduced in Flow 0.120, if you don't want fields to be initialized to `undefined`: ```flow title="input.js" class A { foo: string | void; // initialized to undefined declare bar: number; // type-only, will be removed } ```  - Remove the `allowDeclareFields` and `enums` options ([#12457](https://github.com/babel/babel/pull/12457), [#16792](https://github.com/babel/babel/pull/16792)) **Migration**: Remove these options from your config, since they are now enabled by default. ### `@babel/plugin-transform-runtime` {#babel-plugin-transform-runtime}  - The `corejs` option has been removed ([#16311](https://github.com/babel/babel/pull/16311)) **Migration**: To inject polyfills, you can use [`babel-plugin-polyfill-corejs3`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs3/README.md) or the deprecated [`babel-plugin-polyfill-corejs2`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs2/README.md) directly.  - The `useESModules` option has been removed ([#16141](https://github.com/babel/babel/pull/16141)) **Migration**: Delete it from your configuration. `@babel/runtime` will now automatically expose ES modules when needed, using `package.json#exports`. - The `runtime` and `helpers` options have been removed ([#16311](https://github.com/babel/babel/pull/16311)) **Migration**: Delete them from your configuration: `@babel/runtime` will now always import helpers. If you don't want to inject imports to helpers, remove `@babel/plugin-transform-runtime` from your config. ### `@babel/plugin-transform-modules-systemjs` {#babel-plugin-transform-modules-systemjs}  - [Require `@babel/plugin-transform-dynamic-import` when transforming `import()` to SystemJS](https://github.com/babel/babel/blob/78cd63d9cfcd96e6a151c58fed392c3ee757d861/packages/babel-plugin-transform-modules-systemjs/src/index.js#L183-L185) ([#12700](https://github.com/babel/babel/pull/12700)) **Migration**: Add `@babel/plugin-transform-dynamic-import` to your config: you can already do it in Babel 7. If you are using `@babel/preset-env`, you don't need to do anything. ```diff title="babel.config.js.diff" { "plugins": [ + "@babel/plugin-transform-dynamic-import", "@babel/plugin-transform-modules-systemjs", ] } ``` **Notes**: All the other plugins which support dynamic import (`transform-modules-commonjs` and `transform-modules-amd`) require the separate plugin since it was introduced. We couldn't change it for `transform-modules-systemjs` because that package did already support dynamic import. ### `@babel/plugin-transform-regenerator` {#babel-plugin-transform-regenerator}  - Do not replace global `regeneratorRuntime` references ([#17237](https://github.com/babel/babel/pull/17237)) Babel 7 used to replace references to a `regeneratorRuntime` global with Babel's `regeneratorRuntime` helper: ```js title="input.js" console.log(regeneratorRuntime.isGeneratorFunction(fn)); ``` ```js title="output.js" import _regeneratorRuntime from "@babel/runtime/regenerator"; console.log(_regeneratorRuntime.isGeneratorFunction(fn)); ``` This doesn't happen anymore in Babel 8. **Migration**: The recommended approach is to update your code to not rely on a non-existent `regeneratorRuntime` global. If that's not possible, you can either import the unmaintained [`regenerator-runtime`](https://www.npmjs.com/package/regenerator-runtime) package in your application entrypoint, which will define the `regeneratorRuntime` global, or use [`babel-plugin-polyfill-regenerator`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-regenerator/README.md) to automatically inject that import for you. ### `@babel/plugin-proposal-decorators` {#babel-plugin-proposal-decorators}  - Only support the `legacy` and `2023-11` versions of the proposal. In addition to that, the plugin now requires a [`version`](./plugin-proposal-decorators.md#version) option ([#12712](https://github.com/babel/babel/pull/12712), [#15676](https://github.com/babel/babel/pull/15676)) **Migration**: You should migrate to the [latest version of the proposal](https://github.com/tc39/proposal-decorators/), `"2023-11"`. ```diff title="babel.config.json" { "plugins": [ ["@babel/plugin-proposal-decorators", { - "decoratorsBeforeExport": true, - "version": "2018-09", + "version": "2023-11" }] ] } ``` The syntax is the same, but you will need to rewrite your decorator functions. The spec repo provides [comparison between the latest version and the `2018-09` version](https://github.com/tc39/proposal-decorators#comparison-with-the-previous-stage-2-decorators-proposal). You can already migrate since Babel 7.22.0, using the `"version": "2023-11"` option of `@babel/plugin-proposal-decorators`. Although Babel 8 still supports the `legacy` version, it is advisable to migrate to the `2023-11` version regardless: both Babel 8 and TypeScript 5.0 support the `2023-11` version, while there are [a few behaviour differences](https://github.com/babel/babel/issues/8864#issuecomment-688535867) in the `legacy` version between Babel and `tsc`'s implementation. Browsers will only implement the latest version of the proposal. - Remove `decoratorsBeforeExport: boolean` and `legacy: boolean` option ([#17643](https://github.com/babel/babel/pull/17643)) **Migration**: This change is an optimization stemming from the [`version` candidates change](#decorators-version-change): These options were previously required by obsolete decorator versions, but you can now safely remove them from your Babel config. ### `@babel/plugin-proposal-pipeline-operator` {#babel-plugin-proposal-pipeline-operator}  - Only support the `fsharp` and `hack` proposals ([#17732](https://github.com/babel/babel/pull/17732)) **Migration**: If you used `smart` or `minimal` proposal, you should migrate to either the `fsharp` or the `hack` [proposal](./plugin-proposal-pipeline-operator.md#usage). ```diff title="babel.config.json" { "plugins": [ ["@babel/plugin-proposal-pipeline-operator", { - "proposal": "smart", + "proposal": "hack", + "topicToken": "%" }] ] } ``` ### `@babel/eslint-plugin` {#babel-eslint-plugin}  - Drop support for ESLint 7 and ESLint 8 ([#17766](https://github.com/babel/babel/pull/17766)) **Migration**: Upgrade your ESLint to version 9 or above. ### `@babel/eslint-parser` {#babel-eslint-parser}  - Drop support for ESLint 7 and ESLint 8 ([#17763](https://github.com/babel/babel/pull/17763)) **Migration**: Upgrade your ESLint to version 9 or above. - Remove `allowImportExportEverywhere` option ([#13921](https://github.com/babel/babel/pull/13921)) **Migration**: Use `babelOptions.parserOpts.allowImportExportEverywhere` instead. ```diff title=".eslintrc" { "parser": "@babel/eslint-parser", "parserOptions": { - "allowImportExportEverywhere": true, + "babelOptions": { + "parserOpts": { + "allowImportExportEverywhere": true + } + } } } ```  - Remove `@babel/eslint-parser/experimental-worker` entry point ([#17755](https://github.com/babel/babel/pull/17755)) **Migration**: The worker-based implementation is now the only available one: you can now access it from the main `@babel/eslint-parser` entrypoint. ```diff title=".eslintrc" { - "parser": "@babel/eslint-parser/experimental-worker", + "parser": "@babel/eslint-parser", } ``` - `parserOpts.allowSuperOutsideMethod` defaults to `false` ([#13921](https://github.com/babel/babel/pull/13921)) **Migration**: If you want to restore to Babel 7 behaviour, set `babelOptions.parserOpts.allowSuperOutsideMethod` to `true`. - `parserOpts.allowSuperOutsideMethod` only accepts top-level `super` ([#17505](https://github.com/babel/babel/pull/17505)) **Migration**: Avoid invalid `super` usage. The intention of `allowSuperOutsideMethod` is to construct `super` node in Babel templates, such as `` template.ast`super()` ``, where only top-level `super` is allowed. - `allowReturnOutsideFunction` is inferred from `ecmaFeatures.globalReturn` ([#13921](https://github.com/babel/babel/pull/13921)) **Migration**: If you want to enable `allowReturnOutsideFunction`, set [`ecmaFeatures.globalReturn`](https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-options) to `true`. ```json title=".eslintrc" { "parser": "@babel/eslint-parser", "parserOptions": { "ecmaFeatures": { "globalReturn": true } } } ``` ### `@babel/node` {#babel-node}  - The `-gc` and `-d` command-line flags have been removed ([#15956](https://github.com/babel/babel/pull/15956)) **Migration**: Use the `--expose-gc` and `--inspect` Node.js flags respectively. Note that although `-d` was short for `--debug`, the latter has been [deprecated since Node.js 7.7.0](https://nodejs.org/en/docs/guides/debugging-getting-started#legacy-debugger). - Command-line flags for Node.js and Babel must now be passed _before_ the filename, while flags for the script itself must be passed after. ([#16706](https://github.com/babel/babel/pull/16706)): ```sh babel-node --flag-for-node --flag-for-babel script.js --flag-for-script ``` ### `@babel/standalone` {#babel-standalone}  - Use browserslist's `defaults` as default compilation target ([#12989](https://github.com/babel/babel/pull/12989), [#15551](https://github.com/babel/babel/pull/15551)). If you are already using the `data-targets` attribute, this change won't affect you. **Migration**: You'll probably be fine with the new behavior since the [browserslist's `defaults` covers most modern browsers](https://browsersl.ist/#q=defaults). If you need to support legacy browsers, specify the [`data-targets`](./standalone.md#data-targets) attribute.  - Remove syntax plugins for syntax enabled by default ([#17963](https://github.com/babel/babel/pull/17963)) The following plugins, which used to enable _parsing only_ support for the respective JavaScript features, are now enabled by default and thus not exposed by `@babel/standalone`: - `@babel/syntax-async-generators` - `@babel/syntax-class-properties` - `@babel/syntax-class-static-block` - `@babel/syntax-import-meta` - `@babel/syntax-object-rest-spread` - `@babel/syntax-optional-catch-binding` - `@babel/syntax-top-level-await` **Migration**: Remove them from your `@babel/standalone` config.