Compensate for error formatting mismatch between Webpack 5 and react-dev-utils

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/neat-days-sip.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Compensate for error formatting mismatch between Webpack 5 and react-dev-utils

packages/cli/src/lib/bundler/bundle.ts

@@ -117,9 +117,22 @@ async function build(compiler: webpack.Compiler, isCi: boolean) {
   if (!stats) {
     throw new Error('No stats provided');
   }
-  const { errors, warnings } = formatWebpackMessages(
-    stats.toJson({ all: false, warnings: true, errors: true }),
-  );
+
+  const serializedStats = stats.toJson({
+    all: false,
+    warnings: true,
+    errors: true,
+  });
+  // NOTE(freben): The code below that extracts the message part of the errors,
+  // is due to react-dev-utils not yet being compatible with webpack 5. This
+  // may be possible to remove (just passing the serialized stats object
+  // directly into the format function) after a new release of react-dev-utils
+  // has been made available.
+  // See https://github.com/facebook/create-react-app/issues/9880
+  const { errors, warnings } = formatWebpackMessages({
+    errors: serializedStats.errors?.map(e => (e.message ? e.message : e)),
+    warnings: serializedStats.warnings?.map(e => (e.message ? e.message : e)),
+  });
 
   if (errors.length) {
     // Only keep the first error. Others are often indicative