babel-preset-airbnb

5.0.0 verified Sat Apr 25 auth: no javascript

A Babel preset for transforming JavaScript according to the Airbnb Style Guide, version 5.0.0. It includes transforms for all stage 4 (ES2018) and stage 3 syntax permitted in the guide, excluding generators, async/await, async iterators, and lifted template literal restrictions. It uses @babel/preset-env for targeting environments and supports React development mode, PropTypes removal, and optional loose class mode. Peer dependencies include @babel/core ^7.0.0 and @babel/runtime ^7.0.0. Differentiators: opinionated selection based on Airbnb style, built-in support for React PropTypes removal, and environment targeting via @babel/preset-env. Released as needed, with last major update aligning with Babel 7.

Common errors

error Cannot find module '@babel/core' ↓

cause Missing peer dependency @babel/core.

fix

npm install --save-dev @babel/core @babel/runtime

error Error: Cannot find module 'babel-preset-airbnb' ↓

cause Preset not installed or in wrong devDependencies.

fix

npm install --save-dev babel-preset-airbnb

error SyntaxError: Unexpected token (1:1) while parsing /path/to/file.js with Babel preset 'airbnb' ↓

cause Using Babel 6 with babel-preset-airbnb@5 (Babel 7 preset).

fix

Downgrade to babel-preset-airbnb@3 or upgrade Babel to v7.

error ReferenceError: regeneratorRuntime is not defined ↓

cause Using async/await or generators, which are excluded from the preset.

fix

If needed, add @babel/plugin-transform-runtime or @babel/polyfill.

error Error: Plugin 0 specified in "..." provided an invalid property of type "boolean" (expected object) ↓

cause Incorrect configuration: presets: ['airbnb', { targets: ... }] (should be nested array).

fix

Use presets: [['airbnb', { targets: ... }]]

Warnings

breaking Version 5.0.0 is for Babel 7. Do not use with Babel 6. ↓

fix Use babel-preset-airbnb@3 for Babel 6, or upgrade to Babel 7.

gotcha The preset excludes generators, async/await, and async iterators due to regenerator-runtime overhead. ↓

fix If you need these features, add @babel/plugin-transform-regenerator and @babel/plugin-transform-async-to-generator manually.

gotcha PropTypes removal is opt-in via the 'removePropTypes' option and defaults to 'wrap' mode, not 'remove'. ↓

fix Set removePropTypes: true or removePropTypes: { mode: 'remove' } for production builds.

deprecated The 'additionalTargets' option may be deprecated in future versions; use 'targets' directly. ↓

fix Merge your custom targets into the 'targets' object instead of using 'additionalTargets'.

gotcha When using debug mode (debug: true), output can be verbose and may expose internal plugin lists. ↓

fix Only enable debug for troubleshooting; avoid in CI or production logs.

gotcha The preset requires @babel/runtime as a peer dependency, not just @babel/core. ↓

fix Add @babel/runtime to your dependencies or devDependencies.

Install

npm install babel-preset-airbnb

yarn add babel-preset-airbnb

pnpm add babel-preset-airbnb

Imports

default preset
wrong
```
module.exports = {
  presets: ['babel-preset-airbnb']
};
```
correct
```
module.exports = {
  presets: ['airbnb']
};
```
In .babelrc or babel.config.js, use the shorthand 'airbnb'. The full package name also works but is less common.
with options
```
module.exports = {
  presets: [['airbnb', { targets: { node: 6 } }]]
};
```
Options are passed as an array. Common mistakes include missing inner array brackets.

require in Node API

wrong

var preset = require('babel-preset-airbnb');
require('@babel/core').transform('code', { presets: [preset] });

correct

require('@babel/core').transform('code', {
  presets: [['airbnb', { targets: { node: 6 } }]]
});

The preset is resolved by name; passing the preset object directly may cause plugin duplication issues.

Quickstart

Quick setup for babel-preset-airbnb with Node.js target, React development mode, and PropTypes removal toggle.

// Install: npm install --save-dev babel-preset-airbnb @babel/core @babel/runtime
// .babelrc or babel.config.js
module.exports = {
  presets: [['airbnb', {
    targets: {
      node: 'current'
    },
    development: process.env.NODE_ENV === 'development',
    removePropTypes: process.env.NODE_ENV === 'production',
    loose: false
  }]]
};