fix(babel-preset-gatsby): remove spread operator from node builds (#29346) (#29357)

* fix(babel-preset-gatsby): remove spread operator from node builds * fix transform-classes Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com> (cherry picked from commit d163691) Co-authored-by: Ward Peeters <ward@coding-tech.com>

Author: GatsbyJS Bot

packages/babel-preset-gatsby/package.json

@@ -13,6 +13,7 @@
  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
  "@babel/plugin-proposal-optional-chaining": "^7.12.1",
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+ "@babel/plugin-transform-classes": "^7.12.1",
  "@babel/plugin-transform-runtime": "^7.12.1",
  "@babel/plugin-transform-spread": "^7.12.1",
  "@babel/preset-env": "^7.12.1",

packages/babel-preset-gatsby/src/__tests__/__snapshots__/index.js.snap

@@ -32,12 +32,6 @@ Object {
  "useESModules": true,
  },
  ],
- Array [
- "<PROJECT_ROOT>/node_modules/@babel/plugin-transform-spread/lib/index.js",
- Object {
- "loose": false,
- },
- ],
  "<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
  ],
  "presets": Array [
@@ -304,6 +298,12 @@ Object {
  "loose": false,
  },
  ],
+ Array [
+ "<PROJECT_ROOT>/node_modules/@babel/plugin-transform-classes/lib/index.js",
+ Object {
+ "loose": true,
+ },
+ ],
  "<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
  Array [
  "<PROJECT_ROOT>/node_modules/babel-plugin-transform-react-remove-prop-types/lib/index.js",
@@ -536,7 +536,7 @@ Object {
 }
 `;
 
-exports[`babel-preset-gatsby should specify proper presets and plugins when stage is build-stage 1`] = `
+exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop 1`] = `
 Object {
  "plugins": Array [
  Array [
@@ -574,6 +574,12 @@ Object {
  "loose": false,
  },
  ],
+ Array [
+ "<PROJECT_ROOT>/node_modules/@babel/plugin-transform-classes/lib/index.js",
+ Object {
+ "loose": true,
+ },
+ ],
  "<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
  ],
  "presets": Array [
@@ -790,7 +796,7 @@ Object {
  Array [
  "<PROJECT_ROOT>/node_modules/@babel/preset-react/lib/index.js",
  Object {
- "development": false,
+ "development": true,
  "pragma": "React.createElement",
  "runtime": "classic",
  "useBuiltIns": true,
@@ -800,7 +806,7 @@ Object {
 }
 `;
 
-exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop 1`] = `
+exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop-html 1`] = `
 Object {
  "plugins": Array [
  Array [
@@ -832,12 +838,6 @@ Object {
  "useESModules": true,
  },
  ],
- Array [
- "<PROJECT_ROOT>/node_modules/@babel/plugin-transform-spread/lib/index.js",
- Object {
- "loose": false,
- },
- ],
  "<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
  ],
  "presets": Array [
@@ -1047,14 +1047,16 @@ Object {
  ],
  "loose": true,
  "modules": false,
- "targets": undefined,
+ "targets": Object {
+ "node": "current",
+ },
  "useBuiltIns": "usage",
  },
  ],
  Array [
  "<PROJECT_ROOT>/node_modules/@babel/preset-react/lib/index.js",
  Object {
- "development": true,
+ "development": false,
  "pragma": "React.createElement",
  "runtime": "classic",
  "useBuiltIns": true,

packages/babel-preset-gatsby/src/__tests__/index.js

@@ -5,7 +5,17 @@ import * as pathSerializer from "../utils/path-serializer"
 expect.addSnapshotSerializer(pathSerializer)
 
 describe(`babel-preset-gatsby`, () => {
- it.each([`build-stage`, `develop`, `build-javascript`, `build-html`])(
+ let currentEnv
+ beforeEach(() => {
+ currentEnv = process.env.BABEL_ENV
+ process.env.BABEL_ENV = `production`
+ })
+
+ afterEach(() => {
+ process.env.BABEL_ENV = currentEnv
+ })
+
+ it.each([`develop-html`, `develop`, `build-javascript`, `build-html`])(
  `should specify proper presets and plugins when stage is %s`,
  stage => {
  expect(preset(null, { stage })).toMatchSnapshot()

packages/babel-preset-gatsby/src/index.js

@@ -35,17 +35,22 @@ export default function preset(_, options = {}) {
  // TODO(v3): Remove process.env.GATSBY_BUILD_STAGE, needs to be passed as an option
  const stage = options.stage || process.env.GATSBY_BUILD_STAGE || `test`
  const pluginBabelConfig = loadCachedConfig()
+ let isBrowser
  // unused because of cloud builds
  // const absoluteRuntimePath = path.dirname(
  // require.resolve(`@babel/runtime/package.json`)
  // )
-
  if (!targets) {
- if (stage === `build-html` || stage === `test`) {
+ if (
+ stage === `build-html` ||
+ stage === `develop-html` ||
+ stage === `test`
+ ) {
  targets = {
  node: `current`,
  }
  } else {
+ isBrowser = true
  targets = pluginBabelConfig.browserslist
  }
  }
@@ -114,12 +119,19 @@ export default function preset(_, options = {}) {
  // absoluteRuntime: absoluteRuntimePath,
  },
  ],
- [
+ // TODO allow loose mode as an option in v3
+ isBrowser && [
  resolve(`@babel/plugin-transform-spread`),
  {
  loose: false, // Fixes #14848
  },
  ],
+ isBrowser && [
+ resolve(`@babel/plugin-transform-classes`),
+ {
+ loose: true,
+ },
+ ],
  IS_TEST && resolve(`babel-plugin-dynamic-import-node`),
  stage === `build-javascript` && [
  // Remove PropTypes from production build