React DOM error message due to no dead code elimination #245
Description
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?