fix(gatsby): webpack warnings are no longer in object format by defau…

…lt (#30801) (#30853)

* fix(gatsby): webpack warnings are no longer in object format by default

* Fix (maybe) Typescript errors

(cherry picked from commit 33415c8)

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>

packages/gatsby/src/commands/build.ts

@@ -128,7 +128,8 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
     stats = await buildProductionBundle(program, buildActivityTimer.span)
 
     if (stats.hasWarnings()) {
-      reportWebpackWarnings(stats.compilation.warnings, report)
+      const rawMessages = stats.toJson({ moduleTrace: false })
+      reportWebpackWarnings(rawMessages.warnings, report)
     }
   } catch (err) {
     buildActivityTimer.panic(structureWebpackErrors(Stage.BuildJavascript, err))

packages/gatsby/src/services/start-webpack-server.ts

@@ -112,7 +112,8 @@ export async function startWebpackServer({
 
       if (webpackActivity) {
         if (stats.hasWarnings()) {
-          reportWebpackWarnings(stats.compilation.warnings, report)
+          const rawMessages = stats.toJson({ moduleTrace: false })
+          reportWebpackWarnings(rawMessages.warnings, report)
         }
 
         if (!isSuccessful) {

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

@@ -1,5 +1,5 @@
 import { Reporter } from "gatsby-cli/lib/reporter/reporter"
-import { WebpackError, Module, NormalModule } from "webpack"
+import { WebpackError, StatsCompilation, Module, NormalModule } from "webpack"
 import { Stage as StageEnum } from "../commands/types"
 import formatWebpackMessages from "react-dev-utils/formatWebpackMessages"
 
@@ -145,7 +145,7 @@ export const structureWebpackErrors = (
 }
 
 export const reportWebpackWarnings = (
-  warnings: Array<WebpackError>,
+  warnings: StatsCompilation["warnings"] = [],
   reporter: Reporter
 ): void => {
   const warningMessages = warnings.map(warning => warning.message)