Babel Preset Amex

4.0.3 verified Sat Apr 25 auth: no javascript

Standard Babel preset for American Express, currently at v4.0.3. Maintained by One Amex, it provides a curated set of Babel presets and plugins for transpiling JavaScript and React applications. Includes @babel/preset-env, @babel/preset-react, and plugins for dynamic imports, class properties, export default from, optional chaining, and react-remove-prop-types (production only). Supports configuration for server-only (Node), modern browsers (n-1), and module format (ESM or CommonJS). Differentiated by its opinionated defaults tailored for American Express projects, with a focus on stability and compliance. Release cadence is irregular, with minor updates and patches as needed.

Common errors

error Module not found: Can't resolve 'babel-preset-amex' ↓

cause Package not installed or listed as devDependency.

fix

npm install --save-dev babel-preset-amex

error Error: Cannot find module '@babel/core' ↓

cause @babel/core is a required peer dependency not installed.

fix

npm install --save-dev @babel/core

error Preset options must be an array, received object ↓

cause In babel.config.js, the preset is not wrapped in an array when passing options.

fix

Use: presets: [['amex', { ... }]] instead of presets: ['amex', { ... }]

error Invalid config: 'moduleFormat' must be a string ↓

cause The option 'moduleFormat' expects a string value, but got another type.

fix

Set 'moduleFormat': 'esm' or omit/use falsy value for CommonJS.

Warnings

deprecated v4.0.3 replaced @babel/plugin-proposal-optional-chaining with the standardized plugin @babel/plugin-transform-optional-chaining. Older versions used the proposal plugin. ↓

fix Update to v4.0.3 or later to use the standardized transform.

breaking v4.0.0 dropped support for Node 10, 12, and 14. These Node versions are no longer supported by the preset. ↓

fix Upgrade Node to version 16 or later.

gotcha The option 'moduleFormat' only supports 'esm' for ESM output; any other string (including 'cjs') defaults to CommonJS. There is no explicit 'cjs' option. ↓

fix Use 'moduleFormat': 'esm' for ESM; omit or use any other string for CommonJS.

gotcha The preset auto-removes prop-types / dead code only in production mode (NODE_ENV=production). In development, those transforms are skipped. ↓

fix Ensure NODE_ENV is set correctly to benefit from dead code elimination.

deprecated The legacy browserlist target includes IE 11 (since v4.0.2). Ensure your app does not need to support IE 11 if you set 'modern' to true. ↓

fix Use 'modern': true to exclude IE 11 and other legacy browsers.

Install

npm install babel-preset-amex

yarn add babel-preset-amex

pnpm add babel-preset-amex

Imports

default
wrong
```
import babelPresetAmex from 'babel-preset-amex'
```
correct
```
module.exports = { presets: ['amex'] }
```
Used in .babelrc or babel.config.js as a preset string, not imported directly. If using babel.config.js with module.exports, string 'amex' is correct.

Use as preset with options

wrong

module.exports = { presets: ['amex', { serverOnly: true }] }

correct

module.exports = { presets: [['amex', { serverOnly: true }]] }

Options must be passed as an array pair, not as separate arguments.

CommonJS require
wrong
```
import preset from 'babel-preset-amex';
```
correct
```
const preset = require('babel-preset-amex');
```
The preset is CommonJS; ESM import may cause issues if used in ESM context without proper handling.

Quickstart

Shows how to configure babel-preset-amex in .babelrc or babel.config.js with options for serverOnly, modern, and moduleFormat.

// .babelrc
{
  "presets": [
    [
      "amex",
      {
        "serverOnly": false,
        "modern": true,
        "moduleFormat": "esm"
      }
    ]
  ]
}

// Or babel.config.js
module.exports = {
  presets: [
    ['amex', {
      serverOnly: false,
      modern: true,
      moduleFormat: 'esm'
    }]
  ]
};

// Install
npm install --save-dev babel-preset-amex @babel/core