Registry / web-framework / babel-preset-gatsby

babel-preset-gatsby

library3.16.0jsnpmunverified

Official Babel preset for Gatsby projects, providing a curated set of plugins and presets to enable modern JavaScript and React support while targeting older browsers and Node.js. Current stable version is 3.16.0, released as part of Gatsby 5.x ecosystem. Release cadence follows Gatsby major releases. Key features include automatic polyfilling via core-js, optimized production builds with plugin-transform-react-remove-prop-types, and support for both classic and automatic JSX runtime. Differs from generic Babel presets by being tuned specifically for Gatsby's build pipeline, including optimizations like hook destructuring and dynamic import syntax.

web-framework devops

npm install babel-preset-gatsby

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-GATSB

babel-preset-gatsby

web-frameworkjavascriptv3.16.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ module.exports = { presets: ['babel-preset-gatsby'] }

✗ import babelPresetGatsby from 'babel-preset-gatsby'

Not a JavaScript import; used in .babelrc or babel.config.js as a string reference.

babel-preset-gatsby

✓ { presets: ['babel-preset-gatsby'] }

✗ { presets: [require('babel-preset-gatsby')] }

In .babelrc, use the string name, not require().

options (targets, reactRuntime, reactImportSource)

✓ { presets: [['babel-preset-gatsby', { targets: { browsers: ['last 2 versions'] } }]] }

✗ { presets: ['babel-preset-gatsby', { targets: ... }] }

Options must be passed as an array with the preset string as first element.

Shows how to use babel-preset-gatsby in a .babelrc file, with optional configuration.

// .babelrc { "presets": ["babel-preset-gatsby"] } // Or with options: // { // "presets": [ // [ // "babel-preset-gatsby", // { // "targets": { // "browsers": ["last 2 versions", "not ie 11"] // }, // "reactRuntime": "automatic" // } // ] // ] // }

Debug

Known issues

breakingbabel-preset-gatsby v3 requires Gatsby 5.x and Node >=18. Do not use with Gatsby 4.x or Node 16.

fix

Upgrade to Gatsby 5.x and Node >=18.

affects: >=3.0.0

deprecatedAs of Gatsby 5, the preset is included automatically. Explicit installation is only needed if customizing Babel.

fix

Remove explicit dependency unless you need custom Babel config.

affects: >=3.0.0

gotchaWhen using core-js@3, ensure it is installed as a peer dependency. Missing core-js can cause 'Cannot find module' errors.

fix

Run 'npm install core-js@3' in your project.

affects: >=2.0.0

gotchaThe 'targets' option overrides Gatsby's default browser targets. Setting too narrow targets may break polyfilling for older browsers.

fix

Only override targets if you fully understand the implications for browser support.

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'babel-preset-gatsby'

babel-preset-gatsby not installed or not in node_modules.

fix

Run 'npm install babel-preset-gatsby' or ensure it's in dependencies.

ReferenceError: regeneratorRuntime is not defined

Missing @babel/runtime or core-js polyfill for async/await.

fix

Add '@babel/plugin-transform-runtime' to Babel plugins, or ensure core-js is installed.

TypeError: Cannot read properties of undefined (reading 'some')

Incorrect Babel config syntax (e.g., passing options as separate argument instead of array).

fix

Use array syntax: ['babel-preset-gatsby', { options }].

Upgrade

Version history

3.16.0latest on npm

Audit

Dependencies

@babel/corerequiredPeer dependency required for Babel transformation.

core-jsrequiredPeer dependency required for polyfilling.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/gatsbyjs/gatsby ↗

packagehttps://www.npmjs.com/package/babel-preset-gatsby ↗

homepagehttps://www.gatsbyjs.com ↗