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

[ibc]

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.

[ibc]

I'm trying to make a tiny project that shows the problem.

[ibc]

After hours trying to reproduce the issue in a fresh project, I've realized that the issue was due to the fucxxxx package-lock.json. Deleting it and node_modules and calling npm install again fixed the issue.

NPM is becoming really a pain nowadays... Sorry for the noise.

[miaulightouch]

what's your uglifyjs config? I have same issue here.

I set collapse_vars to false to avoid this issue before, but it's not working now.

[ibc]

No one, I just use .pipe(uglify()). The issue, in my case, disappeared after a proper rm -rf node_modules package-lock.json && npm install and some complains to NPM stuff (which is a pain today).

[AndreasMaros]

Hi there,
I've got the same issue over here (though minification happens via tinyify (which uses uglifyjs) in a Babelify-transformed Browserify project. I've tried re-installing the node_modules as suggested by @ibc but didn't get anywhere. I don't have a package-lock.json in this project.

@miaulightouch did you find a solution for this?

[miaulightouch]

it's required to disable collapse_vars

{
  compress: {
    collapse_vars: false
  }
}

[AndreasMaros]

Thanks for the answer, sorry for the delay. I was using Browserify when I asked my question with uglifiify running uglify-js and could not find a way of directly passing options like collapse_vars to it. Maybe that's where things got confused – I've since switched to Webpack with uglifyjs-webpack-plugin and don't have this issue anymore.

[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
                }
            })
        ]
    }

[mayfieldiv]

When using tools like angular-cli, collapse_vars isn't easily changed. It would be great if debug was able to work properly under default production webpack settings.

[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".

[wadouk]

This issue is not really closed ... could be great to re-opened it

[Qix-]

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

We're not doing anything crazy, here. We're not pushing Javascript to its limits, we're not expecting any weird or new syntax to work (at least, not until v4 when we switched to ES6).

If UglifyJS is messing up code, that's its own fault. Please open a ticket there.

It is not the job of a library like this to conform to random tools such as UglifyJS. They are supposed to accommodate the libraries upon which they operate, not the other way around.

There is nothing actionable on debug's end to fix anything, because there is nothing wrong here. UglifyJS should not be changing functional semantics, so if it does so in a breaking way, take it to the maintainer of UglifyJS.

Or you can use something more modern and active, such as Babel or Terser.

[ibc]

AFAIR I've no longer seen this issue by using Terser. 100% agreed with @Qix.

[wadouk]

We just tell that the printf syntax is unusable in minified version in browser, with a product out of the box and widely used like webpack (18.5M download) / uglify (35.1M). The answer of Uglify, we will know it, there is an option for that. Someone tell that it will cost 5% of js size. Every byte so heavily win is important.
I will not make a migration of the minifier for "only" a logger problem. I will make the calls without printf syntax. it will be ugly, but in less 10 minutes it will be done. thank you for your no help.

[Qix-]

I will not make a migration of the minifier for "only" a logger problem.

This isn't a logger problem. UglifyJS is breaking your code. That should be setting off alarms and red flags for you.

thank you for your no help.

You're welcome. Please take your attitude elsewhere.