Detect React/ReactDOM development/production build

Question

React development build behaves differently than production build, e.g. error handling.

It can be figured out which one is used from the environment but only in modular environment, due to how process.env.NODE_ENV is used by React package:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

The case when process.env may be inapplicable is React used globally as UMD module, window.React and window.ReactDOM:

<script src="some-unknown-react-version.js"></script>

<script>
React // is it in production mode?
</script>

Possible uses are:

• a component that can work in modular and global environments (published as UMD) and renders differently in production

• browser extension or user script where build/production mode is detected from React or ReactDOM object

How can React development/production build be accurately detected at runtime without resorting to the environment?

I'm looking for reliable and clean solution that would be applicable to React 15 and React 16 if possible.

This is not a duplicate of similar questions because existing answers address the problem through process.env.

Answer 1

There is difference. In the development mode, React elements have the property _self defined, whereas in production mode that property is not defined.

So, a solution is to test for this property with a code like this:

function ReactIsInDevelomentMode(){ 
    return '_self' in React.createElement('div');
}