CRA 5.0 show webpack's log

[cqh963852]

In previous version, the webpack's log is hidden.
In CRA 5.0 the webpack's log is shown.

I don't know if this is a feature or a bug.

[joshlongerbeam]

TL;WR
I think it's because of either...

1. The removal of the devServer.quiet option
2. or the devServer.clientLoggingLevel option moving to devServer.client.logging edit: not this

...from webpack v4 to v5

---

In this CRA commit, in webpackDevServer.config.js, the quiet: true config option was removed.
But that makes sense because that option exists in webpack v4, but not in webpack v5 (and I don't see anything directly equivalent to it). I believe the stats option in the root config should be used instead now. stats: 'none' in this case.

In the same file+commit, just a little further up, devServer.clientLogLevel: 'none' was also removed, since it was going to be deprecated according to webpack v4 docs. What actually happened is that the option was moved to devServer.client.logging, but the 'none' option still exists. But it hasn't been added back to CRA's webpack.devServer.config.js. Ignore, as re-adding via the new option name had no effect.

I definitely consider it a bug.

---

Edit

Using the stats: 'none' option in webpack.config.js fixes this.
I manually added stats: 'none' near the end of my node_modules/react-scripts/config/webpack.config.js, and it fixed my output to omit the lines @cqh963852 highlighted.

(I have no idea if or how this affects webpackEnv === 'production' builds though, or if this would also be considered a bug then, too.)

[latobibor]

Link to the documentation about stats.
It seems to me we either have to set it to 'none' or to 'errors-only' if it has any meaningful output during development.

For me this is a usability bug since useful errors and warnings get buried under the stats that are only useful during a production build.

[joshlongerbeam]

It seems to me we either have to set it to 'none' or to 'errors-only'

It should be set to 'none' (or, equivalently, false) to most-closely mimic react-scripts v4 output, as react-scripts attaches listeners to webpack error events for logging. 'errors-only' shows some redundancy.

Screenshots of compile error logs

• stats: false

  

• stats: 'errors-only'

  

[alondon17]

is there a fix for this without editing files inside modules?

[joshlongerbeam]

@alondon17 - as far as I can tell, no. Unless it's worth it to you to npm run eject/react-scripts eject and edit that webpack config, then "uneject" if/when this issue is fixed. (I personally recommend against ejecting, just convinced my team to uneject and it was an absolute slog).

Edit: You can also fix it in the meantime by adding a package (CRACO) and tweaking your npm scripts to call it instead.

[MichalKowalczyk]

Is there any plan to fix this in future CRA updates?

[latobibor]

Screenshots of compile error logs
@joshlongerbeam

Excellent point about duplicates and thanks for investigating the differences! The duplicated version also has more information, like file and line number, which is important.

[jonit-dev]

Any fix?
These logs are super annoying

[cqh963852]

I tried use stats: "none" in devMiddleware option,but still show webpack's log.

[MichalKowalczyk]

I tried use stats: "none" in devMiddleware option,but still show webpack's log.

If you recompile after startup (min. once), the framed section should disappear (also I have stats: 'errors-only').

[cqh963852]

I tried use stats: "none" in devMiddleware option,but still show webpack's log.

The log is emit from fork-ts-checker-webpack-plugin.

CRA now is using "^6.5.0". The newest is "7.0.0". published 6 days ago

[joshlongerbeam]

In CRA v4.0.3 webpack.config.js, a silent: true setting is passed to new ForkTsCheckerWebpackPlugin.

But v4.0.3 requires a much older version of fork-ts-checker-webpack-plugin: 4.1.6.

For newer versions of fork-ts-checker-webpack-plugin, that setting was either moved or no longer exists, in a similar fashion to webpack's quiet: true option removal.

Based on that package's documentation, you might be able to silence it without ejecting or modifying webpack.config.js since the package looks for additional config files in the project root (assuming the settings don't conflict with what CRA lists in the webpack.config.js file).

[geeth24]

For anyone using Craco all you have to do is make a craco.config.js file in your root and add this stats: 'errors-only'.

Like this

const webpack = require("webpack");

module.exports = {
    webpack: {
        configure: {
            
            stats: 'errors-only',

        },
    },
};

[robbiemu]

@thetechie7 can you even use craco with cra5 ? there are open issues in craco's repo here including an open and active "todo" for adding support for cra5: dilanx/craco#378

[geeth24]

@robbiemu yeah you can't use the current version of craco with CRA5. you need to use alpha versions of craco that support CRA5.

npm install @craco/craco@7.0.0-alpha.3

[cqh963852]

#12087

I don't know why the pr closed. 😔

[GlennOu66304]

Mainly caused by the react-script version, I tried npm run eject issue, tried to modify some changes in the webpack config, but that is way more complex for me. So I decided to downgrade my react-script version.
Webpack: silence output
https://stackoverflow.com/questions/30756804/webpack-silence-output

By downgrading the creat-react-app's react version to 17.0.1, react-dom to ^17.0.1, then react-script version to 4.0.1 in the package.json, remove the node modules. run npm i, then npm start can fix the extra webpack lout issue

How to downgrade React version 17 to 16?
https://stackoverflow.com/questions/68109043/how-to-downgrade-react-version-17-to-16#:~:text=Search%20for%20the%20react%20and,to%20downgrade%20to%20React%2016.