{"id":15534,"library":"babel-preset-react","title":"Babel React Preset","description":"babel-preset-react (version 6.24.1 provided, associated with Babel 6) is an official Babel preset that bundles plugins essential for transpiling React-specific syntax, such as JSX. It includes transforms like `syntax-jsx`, `transform-react-jsx`, and `transform-react-display-name`. This particular package, `babel-preset-react`, is now considered deprecated as it belongs to the end-of-life Babel 6 ecosystem. Its functionality has been superseded by the actively maintained `@babel/preset-react` package (current stable version 7.x, with 8.x in release candidate as of March 2026). The release cadence for `babel-preset-react` (v6) is effectively ceased, with all development continuing on its scoped successor. For current React development, migrating to `@babel/preset-react` with Babel 7 or newer is the standard practice, offering compatibility with modern JavaScript and React features.","status":"deprecated","version":"6.24.1","language":"javascript","source_language":"en","source_url":"https://github.com/babel/babel/tree/master/packages/babel-preset-react","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-react","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-react","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This configuration refers to the deprecated `babel-preset-react` package, which is only compatible with Babel 6. For Babel 7+, you must use the scoped preset (`@babel/preset-react`).","wrong":"{ \"presets\": [\"@babel/react\"] }","symbol":"Preset in .babelrc (Babel 6)","correct":"{ \"presets\": [\"react\"] }"},{"note":"This is the correct way to configure the React preset for Babel 7 and newer. It requires installing the `@babel/preset-react` package (e.g., `npm install --save-dev @babel/preset-react`).","wrong":"{ \"presets\": [\"react\"] }","symbol":"Preset in .babelrc / babel.config.js (Babel 7+)","correct":"{ \"presets\": [\"@babel/react\"] }"},{"note":"To use the React preset programmatically with Babel 7+, import the scoped package. The imported value is the preset function itself, which can be passed directly to `@babel/core`'s `transformSync` or `transform` options.","wrong":"import presetReact from 'babel-preset-react';","symbol":"Programmatic Import (Babel 7+)","correct":"import presetReact from '@babel/preset-react';"}],"quickstart":{"code":"import { transformSync } from '@babel/core';\nimport presetReact from '@babel/preset-react';\n\n// Install: npm install --save-dev @babel/core @babel/preset-react\n\nconst reactCode = `\nimport React from 'react';\n\ninterface MyComponentProps { \n  name: string; \n}\n\nfunction MyComponent({ name }: MyComponentProps) {\n  return (\n    <div>\n      <h1>Hello, {name}!</h1>\n      <p>This is a React component using modern JSX syntax.</p>\n    </div>\n  );\n}\n\nexport default MyComponent;\n`;\n\ntry {\n  const result = transformSync(reactCode, {\n    presets: [\n      // For Babel 7+, use the scoped preset name.\n      // Ensure '@babel/preset-react' is installed.\n      ['@babel/react', { runtime: 'automatic' }]\n    ],\n    filename: 'test.tsx' // Helps Babel resolve plugins based on file extension\n  });\n\n  if (result && result.code) {\n    console.log('Transpiled React code (Babel 7+):\n', result.code);\n  } else {\n    console.error('Failed to transpile code.');\n  }\n} catch (error) {\n  console.error('Babel transformation error:', error);\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use the modern `@babel/preset-react` package with `@babel/core` to transpile a TypeScript React component containing JSX. It highlights the standard programmatic usage for Babel 7+ environments."},"warnings":[{"fix":"Migrate your project to Babel 7+ by installing `@babel/core`, `@babel/cli`, and `@babel/preset-react`. Update your `package.json` dependencies and `babel.config.js` or `.babelrc` configuration files to reference `\"@babel/react\"` instead of `\"react\"`.","message":"The `babel-preset-react` package (unscoped) is for Babel 6 and is deprecated. Babel 7 introduced scoped packages, meaning all core Babel components, including presets, moved to the `@babel/` namespace. Using `babel-preset-react` with Babel 7+ core will result in module not found errors or incompatible behavior.","severity":"breaking","affected_versions":"6.x (when used with 7.x+ Babel core)"},{"fix":"Review the official Babel documentation on preset and plugin execution order. Generally, syntax transforms should run before semantic transforms. Presets are executed in reverse order, and plugins in direct order.","message":"The order of presets and plugins in your Babel configuration is crucial. For `@babel/preset-react`, ensure it's positioned correctly relative to other syntax transforms (e.g., `@babel/preset-typescript` or `@babel/preset-flow`) and optimization plugins. Incorrect order can lead to unexpected transpilation errors or inefficient output.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade to `@babel/preset-react` (Babel 7+) to benefit from ongoing maintenance, security patches, and support for the latest language and framework features. This migration involves updating dependencies and configuration as outlined in Babel's migration guide.","message":"The `babel-preset-react` package (version 6.x) is end-of-life and no longer receives updates or bug fixes. Continuing to use this version for new projects or in actively developed existing projects is strongly discouraged due to potential security vulnerabilities and lack of support for modern JavaScript and React features.","severity":"deprecated","affected_versions":"6.x"},{"fix":"Consult the official Babel 8 upgrade guide upon its stable release for detailed migration instructions for `@babel/preset-react` and other Babel packages.","message":"As Babel 8 is in release candidate stages, significant breaking changes are anticipated across the entire Babel ecosystem, including `@babel/preset-react`. While specific details are still being finalized, users should expect to update `@babel/core` and all related presets/plugins when migrating to the stable Babel 8 release.","severity":"breaking","affected_versions":">=8.0.0-beta"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Install the modern scoped preset: `npm install --save-dev @babel/preset-react`. Then, update your Babel configuration (e.g., `.babelrc` or `babel.config.js`) to use `\"@babel/react\"` instead of `\"react\"` in your `presets` array.","cause":"You are likely using Babel 7+ but your configuration or `package.json` still references the deprecated, unscoped `babel-preset-react` package from Babel 6.","error":"Error: Cannot find module 'babel-preset-react' from '...'"},{"fix":"Ensure your preset configuration adheres to the correct array syntax for options (e.g., `['@babel/react', { runtime: 'automatic' }]`). Verify that your Babel core and preset versions are compatible and that you are using the scoped `@babel/preset-react` for Babel 7+.","cause":"This typically indicates an incorrect Babel configuration, such as passing options to a preset without wrapping it in an array (`\"react\", { ... }` instead of `[\"react\", { ... }]`). It can also occur if a Babel 6 preset is loaded by a Babel 7+ core in a non-standard way.","error":"TypeError: Preset react is not a function"},{"fix":"Double-check that `@babel/preset-react` is included in your Babel configuration's `presets` array and that your build tool (e.g., Webpack, Rollup) is correctly configured to apply Babel to your `.jsx` or `.tsx` files. Ensure you have installed `@babel/preset-react`.","cause":"Babel is failing to process JSX syntax, usually because `@babel/preset-react` is either missing from your Babel configuration or is not being applied to your React files.","error":"SyntaxError: Unexpected token '<'"}],"ecosystem":"npm"}