[V4] Message formatting is incompatible with Webpack v5

TypeError: message.split is not a function

error occurs when webpack throws any error during compilation

Seems like this line should check if message is an object with and message key, as webpack v5 mentions in migration guide:

Stats json errors and warnings no longer contain strings but objects with information splitted into properties.
MIGRATION: Access the information on the properties. i. e. message

Environment

webpack: “5.2.0” react-dev-utils: “11.0.0”

[femesq]

For those waiting for the fix to be accepted, you can use a postinstall script like this:

• tools/postinstall.js:

const replace = require('replace-in-file');

const fixFormatWebpackMessages = async () => {
  try {
    const results = await replace({
      files: 'node_modules/react-dev-utils/formatWebpackMessages.js',
      from: `let lines = message.split('\\n');`,
      to: `let lines = [];

  if (typeof message === 'string' || message instanceof String) {
    lines = message.split('\\n');
  } else if ('message' in Object.keys(message)) {
    lines = message['message'].split('\\n');
  }`,
    });

  } catch (e) {
    console.log('error while trying to fix  "formatWebpackMessages.js"', e);
  }
};

fixFormatWebpackMessages();

and on you package.json, add this to the scripts section:

"scripts": {
    ....
    "postinstall": "node tools/postinstall.js",
    ....
  },

[nlozovan]

@Lyfme you shouldn’t change the module code. Instead, change the input format:

const rawMessages = stats.toJson({moduleTrace: false}, true);

From:

const messages = formatWebpackMessages(rawMessages);

To:

const messages = formatWebpackMessages({
   errors: rawMessages.errors.map((e) => e.message),
   warnings: rawMessages.warnings.map((e) => e.message),
 });

The formatWebpackMessages plugin, according to this link, expects an object with 2 props, thus you can push these directly with the expected format.

Hope that helps.