{"id":19297,"library":"babel-preset-gatsby","title":"babel-preset-gatsby","description":"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.","status":"active","version":"3.16.0","language":"javascript","source_language":"en","source_url":"https://github.com/gatsbyjs/gatsby","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-gatsby","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-gatsby","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-gatsby","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel transformation.","package":"@babel/core","optional":false},{"reason":"Peer dependency required for polyfilling.","package":"core-js","optional":false}],"imports":[{"note":"Not a JavaScript import; used in .babelrc or babel.config.js as a string reference.","wrong":"import babelPresetGatsby from 'babel-preset-gatsby'","symbol":"default","correct":"module.exports = { presets: ['babel-preset-gatsby'] }"},{"note":"In .babelrc, use the string name, not require().","wrong":"{ presets: [require('babel-preset-gatsby')] }","symbol":"babel-preset-gatsby","correct":"{ presets: ['babel-preset-gatsby'] }"},{"note":"Options must be passed as an array with the preset string as first element.","wrong":"{ presets: ['babel-preset-gatsby', { targets: ... }] }","symbol":"options (targets, reactRuntime, reactImportSource)","correct":"{ presets: [['babel-preset-gatsby', { targets: { browsers: ['last 2 versions'] } }]] }"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"babel-preset-gatsby\"]\n}\n\n// Or with options:\n// {\n//   \"presets\": [\n//     [\n//       \"babel-preset-gatsby\",\n//       {\n//         \"targets\": {\n//           \"browsers\": [\"last 2 versions\", \"not ie 11\"]\n//         },\n//         \"reactRuntime\": \"automatic\"\n//       }\n//     ]\n//   ]\n// }","lang":"javascript","description":"Shows how to use babel-preset-gatsby in a .babelrc file, with optional configuration."},"warnings":[{"fix":"Upgrade to Gatsby 5.x and Node >=18.","message":"babel-preset-gatsby v3 requires Gatsby 5.x and Node >=18. Do not use with Gatsby 4.x or Node 16.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Remove explicit dependency unless you need custom Babel config.","message":"As of Gatsby 5, the preset is included automatically. Explicit installation is only needed if customizing Babel.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Run 'npm install core-js@3' in your project.","message":"When using core-js@3, ensure it is installed as a peer dependency. Missing core-js can cause 'Cannot find module' errors.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Only override targets if you fully understand the implications for browser support.","message":"The 'targets' option overrides Gatsby's default browser targets. Setting too narrow targets may break polyfilling for older browsers.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install babel-preset-gatsby' or ensure it's in dependencies.","cause":"babel-preset-gatsby not installed or not in node_modules.","error":"Error: Cannot find module 'babel-preset-gatsby'"},{"fix":"Add '@babel/plugin-transform-runtime' to Babel plugins, or ensure core-js is installed.","cause":"Missing @babel/runtime or core-js polyfill for async/await.","error":"ReferenceError: regeneratorRuntime is not defined"},{"fix":"Use array syntax: ['babel-preset-gatsby', { options }].","cause":"Incorrect Babel config syntax (e.g., passing options as separate argument instead of array).","error":"TypeError: Cannot read properties of undefined (reading 'some')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}