babel-preset-react-app-webpack-5

10.0.0 verified Sat Apr 25 auth: no javascript

Forked Babel preset from Create React App, updated for Webpack 5 compatibility. Version 10.0.0 is the latest. This preset configures Babel for React projects with support for Flow and TypeScript, enabling JSX transformation, object rest/spread, absolute runtime paths, and polyfills. Unlike the official 'babel-preset-react-app' which targets Webpack 4, this fork ensures compatibility with Webpack 5 while maintaining the same API. Useful for ejected CRA projects or custom setups requiring Webpack 5.

Common errors

error Error: Cannot find module '@babel/plugin-proposal-private-property-in-object' ↓

cause Plugin removed in v10, but older configs reference it.

fix

Update to babel-preset-react-app-webpack-5@10.0.0 or remove plugin from Babel config.

error Error: Requires Babel "^7.0.0", but was loaded with "7.12.0" ↓

cause Incompatible Babel version. Requires 7.x but <7.12.

fix

Install @babel/core@^7.12.0.

error TypeError: Cannot read property 'bind' of undefined ↓

cause Absolute runtime path issue with @babel/runtime not present.

fix

Set { absoluteRuntime: false } in preset options or install @babel/runtime@^7.12.0.

error SyntaxError: Support for the experimental syntax 'classProperties' isn't currently enabled ↓

cause Missing @babel/plugin-proposal-class-properties.

fix

Ensure babel-preset-react-app-webpack-5 is correctly added; it includes this plugin.

Warnings

breaking Removed support for @babel/plugin-proposal-private-property-in-object. Upgrade to version 10+ to avoid build errors. ↓

fix Update to babel-preset-react-app-webpack-5@10.0.0 or later.

breaking Dropped support for Node.js 10 and 12. Minimum Node 14 required. ↓

fix Use Node 14+.

breaking Preset name must be 'react-app' in Babel config; not 'babel-preset-react-app-webpack-5'. ↓

fix Use "presets": ["react-app"] in .babelrc.

gotcha AbsoluteRuntime defaults to true, causing import path errors if runtime is not installed. Set absoluteRuntime: false if not using @babel/runtime. ↓

fix Add { "absoluteRuntime": false } to preset options.

deprecated The 'useBuiltIns' option is deprecated and will be removed in a future version. Polyfills should be handled separately. ↓

fix Configure core-js or @babel/preset-env useBuiltIns directly.

Install

npm install babel-preset-react-app-webpack-5

yarn add babel-preset-react-app-webpack-5

pnpm add babel-preset-react-app-webpack-5

Imports

default
wrong
```
import preset from 'babel-preset-react-app-webpack-5'
```
correct
```
module.exports = require('babel-preset-react-app-webpack-5')
```
This package exports a CommonJS module; ESM import is not supported directly. Use require in Node/Babel config.

createTransformer

wrong

import { createTransformer } from 'babel-preset-react-app-webpack-5'

correct

const { createTransformer } = require('babel-preset-react-app-webpack-5')

createTransformer is a named export for custom Jest transforms; still require-based.

Quickstart

Shows how to use the preset in .babelrc for a React project with optional TypeScript and relative runtime paths.

// .babelrc
{
  "presets": ["react-app"]
}

// Or with options:
{
  "presets": [
    ["react-app", {
      "flow": false,
      "typescript": true,
      "absoluteRuntime": false
    }]
  ]
}