[V4] Message formatting is incompatible with Webpack v5

[femesq]

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"

[jardicc]

When I change:

let lines = message.split('\n');

into:

message = message.message;
let lines = message.split('\n');

In: node_modules\react-dev-utils\formatWebpackMessages.js
It works again for me.

Hopefully, it will be fixed soon :-)

[Lyfme]

I have the same question.And I can't modify the formatWebpackMessages.js in everyone'node_modules of the team.Please upgrade soon.

[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.

[pubdreamcc]

I have the same question， please upgrade soon！

[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",
    ....
  },

[filipmacek]

When we can hope to see getting this resolved. It really easy fix.
I am getting tired of inserting message = message.message; everytime I got error messsage.split is not a function becase formating webpack messages is not compatible with webpack 5
Thanks

[KurtGokhan]

For now, the cleanest workaround hack dirty solution is:

• Get the tgz of react-dev-utils with the fix
• Upload it to a temporary path in your repo like /temp/react-dev-utils-hotfix.tgz
• Add this line to your package.json:

  "resolutions": {
    "react-dev-utils": "https://github.com/mycompany/myrepo/raw/master/temp/react-dev-utils-hotfix.tgz"
  }

Hoping that #9943 will be merged soon and we will not need this anymore.

[utterly-calm]

When is it getting fixed. Should I downgrade webpack or react-dev-utils to make it work temporarily and to what version?

[utterly-calm]

It is causing a real trouble. Please fix it.