Using Uglify-JS debug prints wrong logs (with "color: #XXXXX" string)

I use ES6 plus browserify plus Babel plus optional uglify-js.

Example to show the problem:

import debug from 'debug';

const logger = debug('device');

logger.info('browser supported [flag:%s, name:"%s", version:"%s"]', flag, name, version);

When I do NOT use uglify-js, everything is ok and the output is:

browser supported [flag:chrome, name:"Chrome", version:"64.0"]

However, when using `uglify-js, this happens:

browser supported [flag:color: #CC9933, name:"chrome", version:Chrome]

Which clearly shows that some wrong value is interpolated into the whole string and, somehow, "color: #CC9933" is printed as first %s argument.

[mitra42]

It would be good if this was documented, its an obscure hack to work around this issue with debug, and its unlikely people will find it in this closed issue. Even more obscure if you don’t explicitly use Uglify, just the default webpack. I had to add the following to get it to work.

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        unused: false,
                        collapse_vars: false // debug has a problem in production without this.
                    }

                    //compress: false  or alternatively remove compression, it only makes about a 5% difference
                }
            })
        ]
    }

[ibc]

It would be great if debug was able to work properly under default production webpack settings.

It would be even greater if libraries worked fine without depending on specific settings in other libraries. I think that’s better than “make it work for my use case, plz”.