fix(gatsby): fix fs empty webpack5 deprecation

packages/gatsby-cli/src/structured-errors/error-map.ts

@@ -49,8 +49,15 @@ const errors = {
     level: Level.ERROR,
   },
   "98124": {
-    text: (context): string =>
-      `${context.stageLabel} failed\n\n${context.sourceMessage}\n\nIf you're trying to use a package make sure that '${context.packageName}' is installed. If you're trying to use a local file make sure that the path is correct.`,
+    text: (context): string => {
+      let message = `${context.stageLabel} failed\n\n${context.sourceMessage}\n\nIf you're trying to use a package make sure that '${context.packageName}' is installed. If you're trying to use a local file make sure that the path is correct.`
+
+      if (context.deprecationReason) {
+        message += `\n\n${context.deprecationReason}`
+      }
+
+      return message
+    },
     type: Type.WEBPACK,
     level: Level.ERROR,
     category: ErrorCategory.USER,

packages/gatsby/src/redux/actions/public.js

@@ -951,6 +951,18 @@ actions.createParentChildLink = (
  * @param {Object} config partial webpack config, to be merged into the current one
  */
 actions.setWebpackConfig = (config: Object, plugin?: ?Plugin = null) => {
+  if (config.node?.fs === `empty`) {
+    report.warn(
+      `[deprecated${
+        plugin ? ` ` + plugin.name : ``
+      }] node.fs is deprecated. Please set "resolve.fallback.fs = false".`
+    )
+    delete config.node.fs
+    config.resolve = config.resolve || {}
+    config.resolve.fallback = config.resolve.fallback || {}
+    config.resolve.fallback.fs = false
+  }
+
   return {
     type: `SET_WEBPACK_CONFIG`,
     plugin,
@@ -968,6 +980,18 @@ actions.setWebpackConfig = (config: Object, plugin?: ?Plugin = null) => {
  * @param {Object} config complete webpack config
  */
 actions.replaceWebpackConfig = (config: Object, plugin?: ?Plugin = null) => {
+  if (config.node?.fs === `empty`) {
+    report.warn(
+      `[deprecated${
+        plugin ? ` ` + plugin.name : ``
+      }] node.fs is deprecated. Please set "resolve.fallback.fs = false".`
+    )
+    delete config.node.fs
+    config.resolve = config.resolve || {}
+    config.resolve.fallback = config.resolve.fallback || {}
+    config.resolve.fallback.fs = false
+  }
+
   return {
     type: `REPLACE_WEBPACK_CONFIG`,
     plugin,

packages/gatsby/src/utils/webpack-error-utils.ts

@@ -104,6 +104,17 @@ const transformWebpackError = (
     id = `98124`
     context.packageName = matches?.[1]
     context.sourceMessage = matches?.[0]
+
+    // get Breaking change message out of error
+    // it shows extra information for things that changed with webpack
+    const BreakingChangeRegex = /BREAKING CHANGE[\D\n\d]+$/
+    if (BreakingChangeRegex.test(castedWebpackError.message)) {
+      const breakingMatch = castedWebpackError.message.match(
+        BreakingChangeRegex
+      )
+
+      context.deprecationReason = breakingMatch?.[0]
+    }
   }
 
   return {