Webpack stats error messages not printing problematic source filename

[slorber]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The code to print console error messages is quite bad:

import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';

export function formatStatsErrorMessage(
  statsJson: ReturnType<webpack.Stats['toJson']> | undefined,
): string | undefined {
  if (statsJson?.errors?.length) {
    const {errors} = formatWebpackMessages(statsJson);
    return errors
      .map((str) => logger.red(str))
      .join(`\n\n${logger.yellow('--------------------------')}\n\n`);
  }
  return undefined;
}

'react-dev-utils/formatWebpackMessages' does not print all the relevant info, notably the file path that on which the error happens, and this prevents users from solving their problems.

Example #9022

Reproducible demo

No response

Steps to reproduce

• init new site
• add src/thing.xyz
• add import './thing.xyz' on src/index.tsx

Console error:

However, the Dev Server error overlay works better:

Expected behavior

We should print relevant information to the console. At least the file path.

This info is definitively available in the Webpack stats:

const stats = {
  errors: [
    {
      moduleIdentifier: '/Users/sebastienlorber/Desktop/website/src/pages/thing.xyz',
      moduleName: './src/pages/thing.xyz',
      loc: '1:0',
      message: "Module parse failed: Unexpected character '🔥' (1:0)\n" +
        'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
        '> 🔥 bad file content'
    }
  ],
  errorsCount: 1,
  warnings: [],
  warningsCount: 0
}

Actual behavior

Error message does not contain the problematic file path

Your environment

• Docusaurus version used: v2.4.1 or v3 canary

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Temporary workaround to help users debug such error messages:

• Use the dev server to have the file path printed in your UI
• Use a local modification of Docusaurus packages to have it printed in your console

Local modification suggested for Docusaurus v2.4.1:

In website/node_modules/@docusaurus/core/lib/webpack/plugins/LogPlugin.js

class LogPlugin extends webpackbar_1.default {
    apply(compiler) {
        super.apply(compiler);
        compiler.hooks.done.tap('DocusaurusLogPlugin', (stats) => {
            if (stats.hasErrors()) {
                const errorsWarnings = stats.toJson('errors-warnings');
+               console.log(errorsWarnings);
                const messages = (0, formatWebpackMessages_1.default)(errorsWarnings);
                if (messages.errors.length) {
                    showError(messages.errors);
                }
            }
        });
    }
}

(for v3 canary it should be similar, in website/node_modules/@docusaurus/core/lib/webpack/utils.js, method formatStatsErrorMessage)