cleanup error messages in webpack

Author: wardpeet

packages/gatsby/src/commands/build.ts

@@ -16,7 +16,10 @@ import { store, readState } from "../redux"
 import * as appDataUtil from "../utils/app-data"
 import { flush as flushPendingPageDataWrites } from "../utils/page-data"
 import * as WorkerPool from "../utils/worker/pool"
-import { structureWebpackErrors } from "../utils/webpack-error-utils"
+import {
+  structureWebpackErrors,
+  reportWebpackWarnings,
+} from "../utils/webpack-error-utils"
 import {
   userGetsSevenDayFeedback,
   userPassesFeedbackRequestHeuristic,
@@ -139,6 +142,10 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
   let stats
   try {
     stats = await buildProductionBundle(program, buildActivityTimer.span)
+
+    if (stats.hasWarnings()) {
+      reportWebpackWarnings(stats.compilation.warnings, report)
+    }
   } catch (err) {
     buildActivityTimer.panic(structureWebpackErrors(Stage.BuildJavascript, err))
   } finally {

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

@@ -1,6 +1,5 @@
 import openurl from "better-opn"
 import report from "gatsby-cli/lib/reporter"
-import formatWebpackMessages from "react-dev-utils/formatWebpackMessages"
 import chalk from "chalk"
 import { Compiler } from "webpack"
 import { Stage } from "../commands/types"
@@ -80,19 +79,12 @@ export async function startWebpackServer({
         cancelDevJSNotice()
       }
 
-      // "done" event fires when Webpack has finished recompiling the bundle.
-      // Whether or not you have warnings or errors, you will get this event.
-
-      // We have switched off the default Webpack output in WebpackDevServer
-      // options so we are going to "massage" the warnings and errors and present
-      // them in a readable focused way.
-      const messages = formatWebpackMessages(stats.toJson({}, true))
       const urls = prepareUrls(
         program.https ? `https` : `http`,
         program.host,
         program.proxyPort
       )
-      const isSuccessful = !messages.errors.length
+      const isSuccessful = !stats.hasErrors()
 
       if (isSuccessful && isFirstCompile) {
         // Show notices to users about potential experiments/feature flags they could
@@ -119,7 +111,9 @@ export async function startWebpackServer({
       isFirstCompile = false
 
       if (webpackActivity) {
-        reportWebpackWarnings(stats)
+        if (stats.hasWarnings()) {
+          reportWebpackWarnings(stats.compilation.warnings, report)
+        }
 
         if (!isSuccessful) {
           const errors = structureWebpackErrors(

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

@@ -1,7 +1,7 @@
-import reporter from "gatsby-cli/lib/reporter"
-import { Stats } from "webpack"
-import { IMatch } from "../types"
+import { Reporter } from "gatsby-cli/lib/reporter/reporter"
+import { WebpackError, Module, NormalModule } from "webpack"
 import { Stage as StageEnum } from "../commands/types"
+import formatWebpackMessages from "react-dev-utils/formatWebpackMessages"
 
 const stageCodeToReadableLabel: Record<StageEnum, string> = {
   [StageEnum.BuildJavascript]: `Generating JavaScript bundles`,
@@ -10,11 +10,35 @@ const stageCodeToReadableLabel: Record<StageEnum, string> = {
   [StageEnum.Develop]: `Generating development JavaScript bundle`,
 }
 
+interface IFileLocation {
+  line: number
+  column: number
+}
+
+interface IWebpackError {
+  name: string
+  message: string
+  file?: string
+  error?: {
+    message: string
+    loc?: {
+      start: IFileLocation
+      end: IFileLocation
+    }
+  }
+  module: Module
+  loc?: {
+    start: IFileLocation
+    end: IFileLocation
+  }
+}
+
 interface ITransformedWebpackError {
   id: string
-  filePath?: string
+  filePath: string
   location?: {
-    start: string
+    start: IFileLocation
+    end: IFileLocation
   }
   context: {
     stage: StageEnum
@@ -26,81 +50,76 @@ interface ITransformedWebpackError {
 
 const transformWebpackError = (
   stage: StageEnum,
-  webpackError: any
+  webpackError: WebpackError
 ): ITransformedWebpackError => {
-  const handlers = [
-    {
-      regex: /Can't resolve '(.*?)' in '(.*?)'/m,
-      cb: (match): IMatch => {
-        return {
-          id: `98124`,
-          context: {
-            sourceMessage: match[0],
-            packageName: match[1],
-          },
-        }
-      },
-    },
-  ]
-
-  const webpackMessage = webpackError?.error?.message || webpackError?.message
-
-  const shared = {
-    filePath: webpackError?.module?.resource,
-    location:
-      webpackError?.module?.resource && webpackError?.error?.loc
-        ? {
-            start: webpackError.error.loc,
-          }
-        : undefined,
-    context: {
-      stage,
-      stageLabel: stageCodeToReadableLabel[stage],
-      sourceMessage: webpackMessage,
-    },
-    // We use original error to display stack trace for the most part.
-    // In case of webpack error stack will include internals of webpack
-    // or one of loaders (for example babel-loader) and doesn't provide
-    // much value to user, so it's purposely omitted.
+  const castedWebpackError = (webpackError as unknown) as IWebpackError
 
-    // error: webpackError?.error || webpackError,
+  let location
+  if (castedWebpackError.loc) {
+    location = castedWebpackError.loc
+  }
+  if (!location && castedWebpackError.error?.loc) {
+    if (castedWebpackError.error.loc.start) {
+      location = castedWebpackError.error.loc
+    } else {
+      location = {
+        start: castedWebpackError.error.loc,
+      }
+    }
   }
 
-  let structured: ITransformedWebpackError | undefined
-
-  for (const { regex, cb } of handlers) {
-    const matched = webpackMessage?.match(regex)
-    if (matched) {
-      const match = cb(matched)
-
-      structured = {
-        id: match.id,
-        ...shared,
-        context: {
-          ...shared.context,
-          packageName: match.context.packageName,
-          sourceMessage: match.context.sourceMessage,
+  // try to get location out of stacktrace
+  if (!location) {
+    const matches = castedWebpackError.message.match(/\((\d+):(\d+)\)/)
+    if (matches && matches[1] && matches[2]) {
+      location = {
+        start: {
+          line: Number(matches[1]),
+          column: Number(matches[2]),
         },
       }
-
-      break
     }
   }
 
-  // If we haven't found any known error
-  if (!structured) {
-    return {
-      id: `98123`,
-      ...shared,
-    }
+  let id = `98123`
+  const context: ITransformedWebpackError["context"] = {
+    stage,
+    stageLabel: stageCodeToReadableLabel[stage],
+    sourceMessage:
+      castedWebpackError.error?.message ?? castedWebpackError.message,
+  }
+
+  // When a module cannot be found we can short circuit
+  if (castedWebpackError.name === `ModuleNotFoundError`) {
+    const matches =
+      castedWebpackError.error?.message.match(
+        /Can't resolve '(.*?)' in '(.*?)'/m
+      ) ?? []
+
+    id = `98124`
+    context.packageName = matches?.[1]
+    context.sourceMessage = matches?.[0]
   }
 
-  return structured
+  return {
+    id,
+    filePath:
+      (castedWebpackError?.module as NormalModule)?.resource ??
+      castedWebpackError.file,
+    location,
+    context,
+    // We use original error to display stack trace for the most part.
+    // In case of webpack error stack will include internals of webpack
+    // or one of loaders (for example babel-loader) and doesn't provide
+    // much value to user, so it's purposely omitted.
+
+    // error: webpackError?.error || webpackError,
+  }
 }
 
 export const structureWebpackErrors = (
   stage: StageEnum,
-  webpackError: any
+  webpackError: WebpackError | Array<WebpackError>
 ): Array<ITransformedWebpackError> | ITransformedWebpackError => {
   if (Array.isArray(webpackError)) {
     return webpackError.map(e => transformWebpackError(stage, e))
@@ -109,13 +128,14 @@ export const structureWebpackErrors = (
   return transformWebpackError(stage, webpackError)
 }
 
-export const reportWebpackWarnings = (stats: Stats): void => {
-  stats.compilation.warnings.forEach(webpackWarning => {
-    if (webpackWarning.warning) {
-      // grab inner Exception if it exists
-      reporter.warn(webpackWarning.warning.toString())
-    } else {
-      reporter.warn(webpackWarning.message)
-    }
-  })
+export const reportWebpackWarnings = (
+  warnings: Array<WebpackError>,
+  reporter: Reporter
+): void => {
+  const warningMessages = warnings.map(warning => warning.message)
+
+  formatWebpackMessages({
+    errors: [],
+    warnings: warningMessages,
+  }).warnings.forEach(warning => reporter.warn(warning))
 }