Detect React/ReactDOM development/production build

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

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.

Detecting dev/production build at client using a umd build seems like a long stretch.If such a requirement exists why not build your app with create-react-app ?

I am not to judge your decisions, so here is something useful.

react-dev-tools plugin provided by facebook detects the build type.

Here is the relevant part of the above mentioned plugin:

https://github.com/facebook/react-devtools/blob/faa4b630a8c055d5ab4ff51536f1e92604d5c09c/backend/installGlobalHook.js#L23

Hope you could make it useful.