Babel Preset CGB

1.7.1 verified Sat Apr 25 auth: no javascript deprecated

Babel preset for Create Guten Block (CGB), version 1.7.1, used to transpile modern JavaScript for WordPress Gutenberg block development. It configures Babel with plugins and presets optimized for WordPress plugin environments, including React JSX support and ES2015+ transforms. This preset is part of the CGB toolchain, which is now deprecated in favor of @wordpress/create-block. It simplifies Babel configuration for WordPress block development but is no longer actively maintained.

Common errors

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

cause Missing local install or wrong working directory.

fix

Run 'npm install --save-dev babel-preset-cgb @babel/core' in your project root.

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using an outdated Babel version (<7) that does not support modern preset format.

fix

Upgrade to Babel 7 by installing '@babel/core' and '@babel/preset-env'.

error Error: Requires Babel "^7.0.0", but was loaded with "6.x". ↓

cause Babel 6 is installed while the preset requires Babel 7.

fix

Install '@babel/core' version 7.x using 'npm install --save-dev @babel/core'.

Warnings

deprecated babel-preset-cgb is deprecated in favor of @wordpress/create-block and @wordpress/babel-preset-default. ↓

fix Migrate to @wordpress/create-block for Gutenberg block development and use @wordpress/babel-preset-default as the Babel preset.

gotcha Package does not support ES modules (ESM); only CommonJS require() works. ↓

fix Use 'const preset = require("babel-preset-cgb")' in Node.js/Babel config files.

gotcha Short preset name 'cgb' may conflict with other presets. Always use full name 'babel-preset-cgb' in config to avoid ambiguity. ↓

fix Set 'presets: ["babel-preset-cgb"]' in your Babel configuration.

Install

npm install babel-preset-cgb

yarn add babel-preset-cgb

pnpm add babel-preset-cgb

Imports

default export

wrong

import preset from 'babel-preset-cgb';

correct

module.exports = require('babel-preset-cgb');

CJS-only; package does not support ESM. Use require().

preset name in config
wrong
```
presets: ['babel-preset-cgb']
```
correct
```
presets: ['cgb']
```
Short form 'cgb' works because Babel resolves prefixes. Full name also works.
preset options
wrong
```
presets: ['cgb', { modules: false }]
```
correct
```
presets: [['cgb', { modules: false }]]
```
Options must be in an array format: [presetName, options].

Quickstart

Installs the preset and configures Babel to use it for transpiling a JavaScript file.

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

// .babelrc or babel.config.js
{
  "presets": ["cgb"]
}

// Example: Transpile a file using Babel CLI
npx babel src/index.js --out-file dist/index.js