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 <[email protected]>
(cherry picked from commit d163691)

Co-authored-by: Ward Peeters <[email protected]>

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