babel-preset-react-union

0.20.0 verified Sat Apr 25 auth: no javascript

Babel preset for React Union, version 0.20.0. It provides a shared Babel configuration used in Lundegaard projects to streamline React integration into legacy systems. The preset includes necessary plugins and presets for modern JavaScript and React transformations. Release cadence is low; it's part of the react-union monorepo. Key differentiators: tailored for micro-frontends and gradual adoption in legacy codebases, with support for dynamic loading and shared dependencies.

Common errors

error Error: Cannot find module 'babel-preset-react-union' ↓

cause Babel config uses full package name 'babel-preset-react-union' instead of shorthand 'react-union'

fix

Change preset name to 'react-union' in your Babel configuration.

error error: ".browserslistrc" is not a valid browserslist query ↓

cause Invalid syntax in browserslist configuration

fix

Ensure browserslist queries are valid (e.g., '> 0.25%, not dead').

Warnings

gotcha Preset name must be 'react-union' not 'babel-preset-react-union' in Babel config ↓

fix Use 'react-union' as the preset name in your Babel configuration.

deprecated Support for core-js@2 is deprecated; use core-js@3 ↓

fix Install core-js@3 and set corejs: 3 in preset options.

deprecated Preset option 'useBuiltIns' defaulted to 'entry' in older versions; now defaults to 'usage' ↓

fix Explicitly set useBuiltIns to 'entry' if you need entry-point polyfilling.

Install

npm install babel-preset-react-union

yarn add babel-preset-react-union

pnpm add babel-preset-react-union

Imports

default

wrong

import preset from 'babel-preset-react-union'

correct

module.exports = require('babel-preset-react-union')

CommonJS module; use require in .babelrc or babel.config.js

default

wrong

{
  "presets": ["babel-preset-react-union"]
}

correct

{
  "presets": ["react-union"]
}

In Babel config files, use the shorthand name 'react-union'

createReactUnionPreset

wrong

import { createReactUnionPreset } from 'babel-preset-react-union'

correct

const createReactUnionPreset = require('babel-preset-react-union').createReactUnionPreset

CommonJS export; no ESM wrapper

Quickstart

Configure Babel to use the react-union preset with browser targets and core-js polyfill options.

// babel.config.js
module.exports = {
  presets: [
    ['react-union', {
      targets: { browsers: '> 0.25%, not dead' },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};