WP5: Warnings logged as objects in browser

[olee]

I upgraded webpack to version 5 and now warnings and errors are logged broken as objects in browser console:

Before wordpress 5 upgrade it looked like this:

I could track this error down to this location (which is logged in the client here. It seems that warnings from the stats object are now returned as object { file: string; message: string; } instead of just strings like before.

I did not check if any plugin might be responsible for this and did not try a minimal sample yet.

Does any1 else experience the same issue?

[alexander-akait]

Fixed in webpack-dev-server@4-beta.0, we are working on the stable release and please don't ignore the issue template in future

[olee]

1. I didn't find any information about that beta on the github page - I actually searched quite a lot about this issue and couldn't find any hints.
   Maybe you should add that to the github readme.
2. I didn't get an issue template shown because I created the issue from a source location - didn't know it would just completely ignore issue templates in that case, sorry.

Anyway, thanks for the info

[alexander-akait]

I didn't find any information about that beta on the github page - I actually searched quite a lot about this issue and couldn't find any hints. Maybe you should add that to the github readme.

Yep, we include it in the next release

[olee]

I checked out the beta and adjusted the devServer config, but it still prints the warnings as objects. Am I missing something?

[alexander-akait]

Can you provide example?

[olee]

Well, I have a really large project here, but I can try to provide relevant parts:

devServer config:

{
        port: env.devServerPort,
        host: '0.0.0.0',
        hot: true,
        compress: true,
        static: [paths.appPublic],
        overlay: {
            errors: true,
            warnings: false,
        },
        historyApiFallback: {
            disableDotRule: true,
        },
    }

webpack config:

{
    target: 'web',
    devServer,
    stats: { /* ... */ },
    plugins: [
      // stuff like ForkTsChecker, html, CaseSensitivePaths, DuplicatePackageChecker, 
      // MiniCssExtract, CopyWebpackPlugin, HotModuleReplacement,, etc. 
      // No other reporting plugins
    ],
    // ...
}

[alexander-akait]

Can you provide screenshot (it will be enough)

[olee]

You mean of the error log?

It definitely looks different from before (it has that [webpack-dev-server] in front of it) so it should prove it's using the beta, but the message is still an object.

[alexander-akait]

Very weird, we fixed it in beta...

[olee]

Can you point me to the commit / code lines? Because when I looked at the code I could not find where the transformation from objects to strings was handled. If I know where to look I could try to find the issue myself.

EDIT: I just checked it again, and the logic for getting stats, sending them to the client and outputting them to the console do not look like they changed particularly.

[alexander-akait]

https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L131 in source core and you should found this in dist client directory inside node_modules

[olee]

Hm... but shouldn't it look something like this

errors.map((error) => stripAnsi(error.message));

instead of this?

errors.map((error) => stripAnsi(error));

[alexander-akait]

Yes, but we support webpack@4 too, so I think errors.map((error) => stripAnsi(error.message ? error.message : error));

[olee]

Will you make a commit to fix this?

[alexander-akait]

Feel free to send a PR, fixing problem with webpack-dev-server in my roadmap on this weekends, but I am glad any help

[olee]

Yeah I just think it's way easier for you to commit that one small adjustment rather than me having to go full blown with a PR here 😏

[alexander-akait]

/cc @snitin315 another easy task, just create warning/error and look at our overlay message

[petercpwong]

Any chance you can backport this fix to v3?