From 4f6003dbaee1ce812203cda567dabe513d74b7a6 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Sat, 20 Feb 2021 23:43:26 +0100
Subject: [PATCH] override defaults

---
 packages/gatsby/src/utils/webpack.config.js | 33 ++++++++++++++++-----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
index 57df89bc5145a..480d0cf8ae826 100644
--- a/packages/gatsby/src/utils/webpack.config.js
+++ b/packages/gatsby/src/utils/webpack.config.js
@@ -287,6 +287,32 @@ module.exports = async (
     // Common config for every env.
     // prettier-ignore
     let configRules = [
+      // 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
+            }
+          }
+        }
+      },
       rules.js({
         modulesThatUseGatsby,
       }),
@@ -414,13 +440,6 @@ module.exports = async (
         "react-dom": getPackageRoot(`react-dom`),
       },
       plugins: [new CoreJSResolver()],
-      // https://webpack.js.org/configuration/module/#resolvefullyspecified
-      // Does not force extensions for ESM modules
-      byDependency: {
-        esm: {
-          fullySpecified: false,
-        },
-      },
     }
 
     const target =