React DOM error message due to no dead code elimination

[bspies-work]

I building a React 16 application using [email protected] and the [email protected]. My webpack configuration for production sets the process.env.NODE_ENV and UglifyJs webpack plugin like so:

new webpack.DefinePlugin({
   'process.env': {
        'NODE_ENV': JSON.stringify(environment)  // where environment = 'production'
   }
}),
new UglifyJsPlugin({
     sourceMap: true,
     uglifyOptions: {
          ecma: 8,
          compress: {
               dead_code: true,
               global_defs: {
                        'process.env.NODE_ENV': environment
                }
           }
      }
})

I keep getting a console error message like the following:
Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build
This message is being generated due to the fact that react-dom is now using a function called checkDCE() to verify that dead code elimination is being applied. Within this function is the if-block:

if (process.env.NODE_ENV !== 'production') {
    // This branch is unreachable because this function is only called
    // in production, but the condition is true only in development.
    // Therefore if the branch is still here, dead code elimination wasn't
    // properly applied.
    // Don't change the message. React DevTools relies on it. Also make sure
    // this message doesn't occur elsewhere in this function, or it will cause
    // a false positive.
    throw new Error('^_^');
  }

A toString() is called on this function at runtime (if React DevTools is installed in Chrome) to check if this if-block has been dead-code eliminated:

 try {
      var toString = Function.prototype.toString, code = toString.call(fn);
      code.indexOf("^_^") > -1 && (hasDetectedBadDCE = !0, setTimeout(function() {
            throw new Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build");
        }));
} catch (err) {}

If I look in the debugger at the toString() on that function I can see this:

"function checkDCE() {
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
  if (
    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
  ) {
    return;
  }
  if (false) {
    // This branch is unreachable because this function is only called
    // in production, but the condition is true only in development.
    // Therefore if the branch is still here, dead code elimination wasn't
    // properly applied.
    // Don't change the message. React DevTools relies on it. Also make sure
    // this message doesn't occur elsewhere in this function, or it will cause
    // a false positive.
    throw new Error('^_^');
  }
  try {
    // Verify that the code above has been dead code eliminated (DCE'd).
    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
  } catch (err) {
    // DevTools shouldn't crash React, no matter what.
    // We should still report in case we break this code.
    console.error(err);
  }
}"

So the if-block here is being reduced to a simple if (false) but no dead code elimination is being applied to it.

Is this a bug or am I doing something wrong?

[alexander-akait]

@bspies-work can you create minimum reproducible test repo?

[kzc]

dup of #206

[alexander-akait]

@kzc thanks 👍

[bspies-work]

FYI, setting inline: false did fix the issue...i.e. uglify-js 2.8.29 seems to have a bug with inlining functions that use a const as an input parameter.