diff --git a/packages/gatsby-core-utils/.babelrc b/packages/gatsby-core-utils/.babelrc
index ac0ad292bb087..f539579f31252 100644
--- a/packages/gatsby-core-utils/.babelrc
+++ b/packages/gatsby-core-utils/.babelrc
@@ -1,3 +1,10 @@
 {
-  "presets": [["babel-preset-gatsby-package"]]
+  "presets": [["babel-preset-gatsby-package"]],
+  "env": {
+    "modern": {
+      "presets": [["babel-preset-gatsby-package", {
+        "esm": true
+      }]]
+    }
+  }
 }
diff --git a/packages/gatsby-core-utils/package.json b/packages/gatsby-core-utils/package.json
index b955697f8800b..417299d667b85 100644
--- a/packages/gatsby-core-utils/package.json
+++ b/packages/gatsby-core-utils/package.json
@@ -7,9 +7,21 @@
     "gatsby-core-utils"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*.js",
-    "./dist/*": "./dist/*.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
   },
   "typesVersions": {
     "*": {
@@ -23,6 +35,7 @@
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-core-utils#readme",
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
@@ -30,10 +43,16 @@
     "directory": "packages/gatsby-core-utils"
   },
   "scripts": {
-    "build": "babel src --out-dir dist/ --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".ts\"",
+    "prebuild": "npm-run-all --npm-path npm clean",
+    "build": "npm-run-all --npm-path npm -s build:*",
+    "build:cjs": "babel src --out-dir dist/ --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".ts\"",
+    "build:mjs": "cross-env BABEL_ENV=modern babel src --out-dir dist/ --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".ts\" --out-file-extension .mjs",
     "typegen": "tsc --emitDeclarationOnly --declaration --declarationDir dist/",
     "prepare": "cross-env NODE_ENV=production npm run build && npm run typegen",
-    "watch": "babel -w src --out-dir dist/ --ignore \"**/__tests__\" --extensions \".ts\""
+    "watch": "npm-run-all --npm-path npm -p watch:*",
+    "watch:cjs": "babel -w src --out-dir dist/ --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".ts\"",
+    "watch:mjs": "cross-env BABEL_ENV=modern babel -w src --out-dir dist/ --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".ts\" --out-file-extension .mjs",
+    "clean": "del-cli dist/*"
   },
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -64,8 +83,10 @@
     "@types/ci-info": "2.0.0",
     "babel-preset-gatsby-package": "^2.19.0-next.0",
     "cross-env": "^7.0.3",
+    "del-cli": "^3.0.1",
     "is-uuid": "^1.0.2",
     "msw": "^0.38.2",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.7.2"
   },
   "engines": {
diff --git a/packages/gatsby-core-utils/src/index.ts b/packages/gatsby-core-utils/src/index.ts
index 3043dd0b647bc..4c0f9ca3035da 100644
--- a/packages/gatsby-core-utils/src/index.ts
+++ b/packages/gatsby-core-utils/src/index.ts
@@ -7,7 +7,7 @@ export { createRequireFromPath } from "./create-require-from-path"
 export { getConfigStore } from "./get-config-store"
 export { getGatsbyVersion } from "./get-gatsby-version"
 export { getTermProgram } from "./get-term-program"
-export { fetchRemoteFile, IFetchRemoteFileOptions } from "./fetch-remote-file"
+export { fetchRemoteFile } from "./fetch-remote-file"
 export { isTruthy } from "./is-truthy"
 export * as uuid from "./uuid"
 export { getMatchPath } from "./match-path"
@@ -19,3 +19,5 @@ export { listPlugins } from "./list-plugins"
 export { createFilePath } from "./filename-utils"
 export { readConfigFile, getConfigPath } from "./utils"
 export { lock } from "./lock"
+
+export type { IFetchRemoteFileOptions } from "./fetch-remote-file"
diff --git a/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts b/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts
index 83626826e9989..6f58044151543 100644
--- a/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts
+++ b/packages/gatsby/src/internal-plugins/functions/gatsby-node.ts
@@ -313,6 +313,38 @@ const createWebpackConfig = async ({
     // watch: !isProductionEnv,
     module: {
       rules: [
+        // Webpack expects extensions when importing ESM modules as that's what the spec describes.
+        // Not all libraries have adapted so we don't enforce its behaviour
+        // @see https://github.com/webpack/webpack/issues/11467
+        {
+          test: /\.mjs$/i,
+          resolve: {
+            byDependency: {
+              esm: {
+                fullySpecified: false,
+              },
+            },
+          },
+        },
+        {
+          test: /\.js$/i,
+          descriptionData: {
+            type: `module`,
+          },
+          resolve: {
+            byDependency: {
+              esm: {
+                fullySpecified: false,
+              },
+            },
+          },
+          use: {
+            loader: `babel-loader`,
+            options: {
+              presets: [`@babel/typescript`],
+            },
+          },
+        },
         {
           test: [/.js$/, /.ts$/],
           exclude: /node_modules/,