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'); } 

Answer 2

Your question is clear but you do not clarify your build system, do you use webpack or parcel? do you have Server Side Rendering or not? do you run your built application by node or pm2? or you just build your application and then put the built bundled file inside your page that made by other technology like PHP or C#?

Actually, the above questions can determine your answer, but surely, you use module bundler, so I proffer use resolving a config file in your project.

If I was your place, undoubtedly, I use webpack, two webpack configuration files, one for development and one for production mode. then I create a folder that contains two files with config.dev.js and config.prod.js. In the development webpack:

~~~ module.exports = {         ~~~         resolve: {             extensions: ['.js', '.jsx'],             alias: {                 ~~~                 Config: `${srcDir}/config/config.dev.js`,                 // srcDir is a defined variable for source directory             }         },         ~~~ 

In the production webpack:

~~~ module.exports = {         ~~~         resolve: {             extensions: ['.js', '.jsx'],             alias: {                 ~~~                 Config: `${srcDir}/config/config.prod.js`,                 // srcDir is a defined variable for source directory             }         },         ~~~ 

And now you can put each dev and prod data for your build types. for example in your config.dev.js can write:

module.exports = {     buildType: "dev" }; 

Surely, in your config.prod.js can write:

module.exports = {     buildType: "prod" }; 

Absolutely you can access to the config data with below code inside your react files:

import config from 'Config'; 

And with this solution, you can understand the type of your build in the real-time execution of your application.

Note: For more information, you can see my medium article, And if you are not familiar with long reads see the article repository Also the newer version of the example of my answer repository that contains configs.