diff --git a/packages/babel-preset-gatsby/src/dependencies.ts b/packages/babel-preset-gatsby/src/dependencies.ts
index 98bc15373f2ce..048cf85c7f200 100644
--- a/packages/babel-preset-gatsby/src/dependencies.ts
+++ b/packages/babel-preset-gatsby/src/dependencies.ts
@@ -3,15 +3,22 @@
 
 import path from "path"
 
+interface IPresetOptions {
+  stage?: "build-javascript" | "build-html" | "develop" | "develop-html"
+}
+
 // export default is required here because it is passed directly to webpack
 // via require.resolve
 // This function has a better inference than would be beneficial to type, and it's relatively easy to grok.
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export default () => {
+export default (_?: unknown, options: IPresetOptions = {}) => {
   const absoluteRuntimePath = path.dirname(
     require.resolve(`@babel/runtime/package.json`)
   )
 
+  // 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`
+
   return {
     // Babel assumes ES Modules, which isn't safe until CommonJS
     // dies. This changes the behavior to assume CommonJS unless
@@ -53,6 +60,13 @@ export default () => {
       ],
       // Adds syntax support for import()
       require.resolve(`@babel/plugin-syntax-dynamic-import`),
-    ],
+      stage === `build-javascript` && [
+        // Remove PropTypes from production build
+        require.resolve(`babel-plugin-transform-react-remove-prop-types`),
+        {
+          removeImport: true,
+        },
+      ],
+    ].filter(Boolean),
   }
 }
diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.ts.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.ts.snap
index 7d736ebdf5f1b..bbf7618b26235 100644
--- a/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.ts.snap
+++ b/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.ts.snap
@@ -14,7 +14,12 @@ Object {
         "compact": false,
         "configFile": false,
         "presets": Array [
-          "<PROJECT_ROOT>/packages/babel-preset-gatsby/dependencies.js",
+          Array [
+            "<PROJECT_ROOT>/packages/babel-preset-gatsby/dependencies.js",
+            Object {
+              "stage": "develop",
+            },
+          ],
         ],
         "sourceMaps": false,
       },
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index f2c86dfc83160..466b3251c5bda 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -352,7 +352,14 @@ export const createWebpackUtils = (
         babelrc: false,
         configFile: false,
         compact: false,
-        presets: [require.resolve(`babel-preset-gatsby/dependencies`)],
+        presets: [
+          [
+            require.resolve(`babel-preset-gatsby/dependencies`),
+            {
+              stage,
+            },
+          ],
+        ],
         // If an error happens in a package, it's possible to be
         // because it was compiled. Thus, we don't want the browser
         // debugger to show the original code. Instead, the code