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

[alex521]

When is it getting fixed?

[Obi-Dann]

Got another workaround without modifying files in node_modules. It changes webpack.stats.toJson() errors and warning arrays from objects to strings. It's a webpack plugin that should be added to the array of plugins in your webpack config

// @ts-check

/**
 * formatWebpackMessages helper from Create-react-app expects errors and warnings to be
 * arrays of strings as they are in Webpack 4.
 * Webpack 5 changed them to objects.
 * This plugin changes them back to strings until the issue is resolved
 * https://github.com/facebook/create-react-app/issues/9880
 */
class FixMessageFormatterPlugin {
    /** @type {import('webpack').WebpackPluginFunction} */
    apply = compiler => {
        compiler.hooks.compilation.tap('FixMessageFormatterPlugin', compilation => {
            compilation.hooks.statsFactory.tap('FixMessageFormatterPlugin', stats => {
                stats.hooks.result
                    .for('error')
                    .tap('FixMessageFormatterPlugin', (obj, data, ctx) =>
                        formatError(obj, 'ERROR'),
                    );

                stats.hooks.result
                    .for('warning')
                    .tap('FixMessageFormatterPlugin', (obj, data, ctx) =>
                        formatError(obj, 'WARNING'),
                    );
            });
        });
    };
}

function formatError(obj, prefix = '') {
    const moduleName = obj.moduleName;
    const location = obj.loc;

    if (moduleName) {
        prefix = (prefix + ` in ${moduleName}`).trim();

        if (location) {
            prefix = (prefix + `:${location}`).trim();
        }
    }

    return `${prefix ? prefix + '\n' : ''}${obj.message}`;
}

module.exports = FixMessageFormatterPlugin;

[darrylsepeda]

This issue already closed, but I still encounter it even with the latest version of react-dev-utils..

[filipmacek]

Yes, this is still a problem on version 11.0.4

[Enfield1]

@filipmacek, @darrylsepeda
You can use version 12.0.0-next.47. This bug is fixed there

[pringshia]

Would it also be possible to fix this for version 11.x so as not to introduce the other breaking changes that are a part of version 12.x? My use-case is I'm in a yarn 2 monorepo setup sharing react-dev-utils across workspaces.