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 {