fix(gatsby): always pass stage option to babel-preset-gatsby (#30047)

Author: vladar

packages/gatsby/src/redux/__tests__/__snapshots__/babelrc.ts.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Babelrc actions/reducer adds stage option to babel-preset-gatsby defined with userland babelrc 1`] = `
+Array [
+  Array [
+    Array [
+      "/path/to/module/babel-preset-gatsby",
+      Object {
+        "stage": "develop",
+      },
+    ],
+    Object {
+      "type": "preset",
+    },
+  ],
+]
+`;
+
 exports[`Babelrc actions/reducer allows adding a new plugin 1`] = `
 Object {
   "stages": Object {

packages/gatsby/src/redux/__tests__/babelrc.ts

@@ -3,6 +3,7 @@ import { babelrcReducer } from "../reducers/babelrc"
 import {
   prepareOptions,
   mergeConfigItemOptions,
+  addRequiredPresetOptions,
 } from "../../utils/babel-loader-helpers"
 
 describe(`Babelrc actions/reducer`, () => {
@@ -83,6 +84,20 @@ describe(`Babelrc actions/reducer`, () => {
     expect(babel.createConfigItem.mock.calls).toMatchSnapshot()
   })
 
+  it(`adds stage option to babel-preset-gatsby defined with userland babelrc`, () => {
+    const fakeResolver = (moduleName): string => `/path/to/module/${moduleName}`
+    const babel = { createConfigItem: jest.fn() }
+    const presets: any = [
+      {
+        file: { resolved: fakeResolver(`babel-preset-gatsby`) },
+      },
+    ]
+
+    addRequiredPresetOptions(babel, presets, { stage: `develop` }, fakeResolver)
+
+    expect(babel.createConfigItem.mock.calls).toMatchSnapshot()
+  })
+
   it(`allows setting options`, () => {
     const action = actions.setBabelOptions(
       { options: { sourceMaps: `inline` } },

packages/gatsby/src/utils/babel-loader-helpers.js

@@ -104,6 +104,29 @@ const prepareOptions = (babel, options = {}, resolve = require.resolve) => {
   ]
 }
 
+const addRequiredPresetOptions = (
+  babel,
+  presets,
+  options = {},
+  resolve = require.resolve
+) => {
+  // Always pass `stage` option to babel-preset-gatsby
+  //  (even if defined in custom babelrc)
+  const gatsbyPresetResolved = resolve(`babel-preset-gatsby`)
+  const index = presets.findIndex(p => p.file.resolved === gatsbyPresetResolved)
+
+  if (index !== -1) {
+    presets[index] = babel.createConfigItem(
+      [
+        gatsbyPresetResolved,
+        { ...presets[index].options, stage: options.stage },
+      ],
+      { type: `preset` }
+    )
+  }
+  return presets
+}
+
 const mergeConfigItemOptions = ({ items, itemToMerge, type, babel }) => {
   const index = _.findIndex(
     items,
@@ -133,3 +156,4 @@ exports.getCustomOptions = getCustomOptions
 // Export helper functions for testing
 exports.prepareOptions = prepareOptions
 exports.mergeConfigItemOptions = mergeConfigItemOptions
+exports.addRequiredPresetOptions = addRequiredPresetOptions

packages/gatsby/src/utils/babel-loader.js

@@ -4,6 +4,7 @@ const {
   prepareOptions,
   getCustomOptions,
   mergeConfigItemOptions,
+  addRequiredPresetOptions,
 } = require(`./babel-loader-helpers`)
 const { getBrowsersList } = require(`./browserslist`)
 
@@ -76,6 +77,9 @@ module.exports = babelLoader.custom(babel => {
           plugins: [...options.plugins, ...requiredPlugins],
           presets: [...options.presets, ...requiredPresets],
         }
+        // User-defined preset likely contains `babel-preset-gatsby`
+        // Make sure to pass required dynamic options (e.g. `stage` to it):
+        addRequiredPresetOptions(babel, options.presets, customOptions)
       }
 
       // Merge in presets/plugins added from gatsby plugins.