Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Preset in .babelrc (Babel 6)
✓ { "presets": ["react"] }
✗ { "presets": ["@babel/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+)
✓ { "presets": ["@babel/react"] }
✗ { "presets": ["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+)
✓ import presetReact from '@babel/preset-react';
✗ 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.
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);
}
Debug
Known issues
breakingThe `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.fixMigrate 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"`.
affects: 6.x (when used with 7.x+ Babel core)
gotchaThe 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.fixReview 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.
affects: all
deprecatedThe `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.fixUpgrade 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.
affects: 6.x
breakingAs 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.fixConsult the official Babel 8 upgrade guide upon its stable release for detailed migration instructions for `@babel/preset-react` and other Babel packages.
affects: >=8.0.0-beta
Errors
Common errors & fixes
Error: Cannot find module 'babel-preset-react' from '...'
You are likely using Babel 7+ but your configuration or `package.json` still references the deprecated, unscoped `babel-preset-react` package from Babel 6.
fixInstall 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
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.
fixEnsure 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 '<'
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.
fixDouble-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`.
Audit
Dependencies
No dependency data recorded yet.