Wp-calypso: Debug placeholders replaced with colors in production

[sirreal]

In NODE_ENV === 'production' builds, the %s string placeholder can be observed being replaced with colors rather than the provided value. I haven't verified whether other placeholders work as expected.

Steps to reproduce

1. Visit https://wordpress.com
2. Type the following in the browser console.
   js localStorage.debug = 'calypso:popover'
3. Refresh and observe color nonsense in the debug statements.

What I expected

%s should be replaced by the provided arguments.

What happened instead

%s is replaced by what appears to be the color for the current debug instance.

Screenshot / Video

Dev

Prod

Context / Source

Spotted while shipping #21104 which led to workaround #21390

/cc @samouri (#12841)

[sirreal]

Naïvely tried upgrading these modules with no success:

• babel-core
• babel-loader
• babel-preset-env
• babel-register
• debug
• uglifyjs-webpack-plugin

[sirreal]

I've narrowed this down to uglification. With this patch, I no longer see the issue in Docker builds:

diff --git a/webpack.config.js b/webpack.config.js
index fcdf23efa5..61655855cc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,9 +31,7 @@ const config = require( './server/config' );
 const calypsoEnv = config( 'env_id' );
 const bundleEnv = config( 'env' );
 const isDevelopment = bundleEnv === 'development';
-const shouldMinify = process.env.hasOwnProperty( 'MINIFY_JS' )
-   ? process.env.MINIFY_JS === 'true'
-   : ! isDevelopment;
+const shouldMinify = false;

 // load in the babel config from babelrc and disable commonjs transform
 // this enables static analysis from webpack including treeshaking

[sirreal]

Uglify compress is the culprit. With this patch there's no issue:

diff --git a/webpack.config.js b/webpack.config.js
index fcdf23efa5..d77beea979 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -295,7 +295,7 @@ if ( shouldMinify ) {
        new UglifyJsPlugin( {
            cache: 'docker' !== process.env.CONTAINER,
            parallel: true,
-           uglifyOptions: { ecma: 5 },
+           uglifyOptions: { compress: false, ecma: 5 },
            sourceMap: Boolean( process.env.SOURCEMAP ),
        } )
    );

[sirreal]

Seems to be a bug in uglify-es: https://github.com/mishoo/UglifyJS2/issues/3010 (thanks @ockham 💪)

[blowery]

You two. Amazing detective work! 🔍