Babel React Preset

Common errors

• Error: Cannot find module 'babel-preset-react' from '...'

  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.
  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.

• TypeError: Preset react is not a function

  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.
  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+.

• SyntaxError: Unexpected token '<'

  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.
  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`.

Warnings

• breaking 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.
  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"`.
• gotcha 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.
  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.
• deprecated 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.
  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.
• breaking 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.
  Fix: Consult the official Babel 8 upgrade guide upon its stable release for detailed migration instructions for `@babel/preset-react` and other Babel packages.

Install

• npm install babel-preset-react npm
• yarn add babel-preset-react yarn
• pnpm add babel-preset-react pnpm

Imports

• Preset in .babelrc (Babel 6)
  wrong:

  { "presets": ["@babel/react"] }

  correct:

  { "presets": ["react"] }

  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`).
• Preset in .babelrc / babel.config.js (Babel 7+)
  wrong:

  { "presets": ["react"] }

  correct:

  { "presets": ["@babel/react"] }

  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`).
• Programmatic Import (Babel 7+)
  wrong:

  import presetReact from 'babel-preset-react';

  correct:

  import presetReact from '@babel/preset-react';

  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.

Quickstart

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.

import { transformSync } from '@babel/core';
import presetReact from '@babel/preset-react';

// Install: npm install --save-dev @babel/core @babel/preset-react

const reactCode = `
import React from 'react';

interface MyComponentProps { 
  name: string; 
}

function MyComponent({ name }: MyComponentProps) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a React component using modern JSX syntax.</p>
    </div>
  );
}

export default MyComponent;
`;

try {
  const result = transformSync(reactCode, {
    presets: [
      // For Babel 7+, use the scoped preset name.
      // Ensure '@babel/preset-react' is installed.
      ['@babel/react', { runtime: 'automatic' }]
    ],
    filename: 'test.tsx' // Helps Babel resolve plugins based on file extension
  });

  if (result && result.code) {
    console.log('Transpiled React code (Babel 7+):
', result.code);
  } else {
    console.error('Failed to transpile code.');
  }
} catch (error) {
  console.error('Babel transformation error:', error);
}