create-react-app: [V4] Message formatting is incompatible with Webpack v5

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

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

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;

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

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.

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 😃

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

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

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