React-hot-loader: How to quiet the console.log outputs?

[volkanunsal]

This kind of output in the browser console is really hard to work with. Can I disable these outputs?

[HMR] App is up to date.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...

[gaearon]

You can copy paste webpack/hot/only-dev-server to your project, strip logs from it and use your version instead.

Closing, let me know if I missed something!

[steida]

Silent option in configuration would be nice.

[gaearon]

It's not really something we can control in RHL. You can file an issue with Webpack.

[pburtchaell]

It's a bit hacky, but I currently have this and it helps by clearing the console of old logs after each refresh:

if (WEB_ENV === 'development') {
  console.clear();
}

The WEB_ENV variable is set by WebPack in the config.

[gaearon]

I'd use if ('production' !== process.env.NODE_ENV) in this case.
You'd need to set it to true using DefinePlugin for production anyway so React is properly compressed.

[irom-io]

How disable console.log for webpack/hot/only-dev-server ??

const server = new WebpackDevServer(compiler, { stats: {colors: true}, hot: true, clientLogLevel: 'none', //quiet: true, watchOptions: { ignored: /node_modules/ } /* historyApiFallback: { index: '/' }*/ });

quiet: true not working!

[tavurth]

Add this to your apps index.js:

// Clear after module reload
window.addEventListener('message', e => {
    if ('production' !== process.env.NODE_ENV) {
        console.clear();
    }
});

For example, this is part of my index.jsx entry point:

...

const render = Component => {
    ReactDOM.render(
        <Provider store={store}>
            <MuiThemeProvider className='full-size'>
                <Component />
            </MuiThemeProvider>
        </Provider>,
        document.getElementById('root')
    );
};

render(App);

if (module.hot) {
    module.hot.accept();

    window.addEventListener('message', e => {
        if ('production' !== process.env.NODE_ENV) {
            console.clear();
        }
    });
}

if (module.hot) will get culled out when we run production minification, and every time HMR reloads, we'll clear the console.

[leongaban]

This is really annoying, could anyone tell me where these logs are located in the react-hot-reload folder? Did not see them.

[tavurth]

@leongaban They're sprinkled liberally througout the code.
Go to your /node_modules/webpack folder and run a search and replace:

find . -type f -name "*.js" -exec sed -i '' 's/console.log.*$//g' {} \;

[leongaban]

@tavurth ah thanks! I was looking in the react-hot-reload folder.

[tavurth]

There's also this:

https://github.com/webpack/webpack-dev-server/pull/579#issuecomment-244406936

[peteobrien]

A quick way to silencing could be filtering in devtools with regex. i.e. ~ /^((?!(\[HMR|\[WDS)).)*$/
UPDATE: in chrome 62 we can simply use -HMR -WDS

[tofilagman]

Add this to your apps index.js or index.ts:

var _log = console.log;

console.log = function () {
    if (arguments[0].indexOf('[HMR]') == -1) //remove hmr logging
        return _log.apply(console, arguments);
};

[lorenzomigliorero]

Import log module directly in your bundle, and change logLevel:

import { setLogLevel } from 'webpack/hot/log';
setLogLevel('none');

[geiszla]

For those who can't make it work with import { setLogLevel } from 'webpack/hot/log', see this comment: https://github.com/webpack/webpack/pull/6265#issuecomment-430932442

[IAMtheIAM]

Hey guys, none of these suggestions worked for me, except the CLI option does!!

webpack --client-log-level warning
// or 
webpack --client-log-level error

It defaults to info which is where all the [HMR] and [WDS] spam comes from.

[jwld]

You can also just set clientLogLevel in your webpack devServer config:

devServer: {
  clientLogLevel: 'none'
}

https://webpack.js.org/configuration/dev-server/#devserverclientloglevel

[fenok]

If you're using webpack-hot-middleware, you can configure it like this: webpack-hot-middleware/client?reload=true&noInfo=true

[agrublev]

Webpack config

devServer: {
        clientLogLevel: "silent",