How to turn on/off ReactJS 'development mode'?

Question

Started using ReactJS's prop validation feature, which as the docs say only works in 'development mode' for performance reasons.

React seems to be validating the properties of a particular component I've annotated, but I don't remember explicitly turning on 'development mode'.

I tried searching for how to trigger/toggle development mode, but haven't had any luck.

great succinct explanation of `process.env` for webpack users: https://stackoverflow.com/questions/37311972/react-doesnt-switch-to-production-mode — ptim, Nov 15 '16 at 23:05

score 142 · Accepted Answer · edited Aug 06 '20 at 20:08

142

The other answer assumes you are using external pre-built files from react, and while correct that is not how most folks are going to or should consume React as a package. Moreover, at this point most every React library and package also relies on the same convention to toggle dev time helpers off during production. Just using the minified react will leave all those potential optimizations on the table as well.

Ultimately the magic comes down to React embedding references to process.env.NODE_ENV throughout the codebase; these act like a feature toggle.

if (process.env.NODE_ENV !== "production")
  // do propType checks

The above is the most common pattern, and other libraries follow it as well. So to "disable" these checks we need to toggle NODE_ENV to "production"

The proper way to disable "dev mode" is through your bundler of choice.

webpack

Use the DefinePlugin in your webpack config like so:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

Browserify

Use the Envify transform and run your browserify build step with NODE_ENV=production ("set NODE_ENV=production" on Windows)

Result

This will produce output bundles that has all instances of process.env.NODE_ENV replaced with the string literal: "production"

Bonus

When minifying the transformed code you can take advantage of "Dead Code Elimination". DCE is when the minifier is smart enough to realize that: "production" !== "production" is always false and so will just remove any code in the if block saving you bytes.

edited Aug 06 '20 at 20:08

HoldOffHunger

18,769
10
104
133

answered Mar 29 '16 at 13:17

monastic-panic

3,987
1
22
20

1

On react documentation explains as well https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build – asotog Feb 14 '17 at 14:14
1

Do you really need JSON.stringify('production') there? Or is just 'production' enough? – Vlad Nicula Mar 01 '17 at 08:25
4

@VladNicula it needs to be `'"production"'` ie. double quoted, stringify does that for you – monastic-panic Mar 02 '17 at 20:23
1

You can also use `JSON.stringify(process.env.NODE_ENV)` so it can be toggled via `NODE_ENV=production webpack ...` on the command-line. Added bonus of explicit code =) – Henry Blyth Mar 04 '17 at 14:53
2

Just found out that this `DefinePlugin` use can be replaced with `new webpack.EnvironmentPlugin(['NODE_ENV'])` – Henry Blyth Mar 04 '17 at 15:58
Note: webpack CLI 's`-p` flag takes a precedence over `EnvironmentPlugin` (Webpack 4 equivalent of `DefinePlugin`). This means that regardless of what you define in webpack config, if there's `-p` on the command (like `NODE_ENV=development && webpack --mode development -p`), `NODE_ENV` will be set to `production` anyway. – zdanowiczkonrad Apr 23 '18 at 15:09
I am using cross-env in webpack but that is not working. i.e. `"build:prod": "cross-env NODE_ENV=production webpack",` Is 'DefinePlugin' only way in webpack. – Shrikant Dande Nov 12 '18 at 15:36
What if I'm not using a bundler? – Juan May 25 '22 at 22:34

score 51 · Answer 2 · answered Mar 01 '14 at 19:08

51

Yeah, it's not really well documented, but on the ReactJS download page it talks about development and production modes:

We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.

Basically, the unminified version of React is "development" mode, and the minified version of React is "production" mode.

To be in "production" mode, just include the minified version react-0.9.0.min.js

answered Mar 01 '14 at 19:08

Edward M Smith

10,627
2
46
50

Thanks for the quick answer! Hopefully then my bundler (webpack) will then remove the logging once I minify my app (and dependencies). – gdso Mar 01 '14 at 19:34
2

If **your** bundler minifies, I don't think it will remove the debugging. You need to include the minified version of React in your production build - the one included in the React distribution - it's actually different code from the unminified version, from what I understand. – Edward M Smith Mar 01 '14 at 21:00
18

If you're building from the `npm` react package directly, then use soemthing like envify to set `NODE_ENV = 'production'` to do the same checks. @EdwardMSmith Let me know where you would have wanted to see that info and I can add it (or you can just submit a PR)! – Sophie Alpert Mar 01 '14 at 21:58
2

@BenAlpert - I would say a page either under Guides or Tips outlining production deployment. I'll take a look and see what I can come up with. I've not actually *done* a production deployment, so it may need some revisions. I'll submit a PR. – Edward M Smith Mar 01 '14 at 23:44
1

I just wanted to add on this that the addon version does not seem to have development mode turned on, even the unminified version. – KallDrexx Feb 15 '15 at 01:05
The `react-with-addons.min.js` file is also a production mode build right? At least it renders things 2x faster than `-addons.js` (without `min`). – KajMagnus Sep 18 '15 at 22:39
8

I don't think this is the best answer as some people build their react with browserify and an answer making use of `NODE_ENV` should be present at the top. – Bjorn Oct 19 '15 at 17:33
For those who build using browserify, check this link: http://stackoverflow.com/questions/32526281/how-to-set-react-to-production-mode-when-using-gulp – Vadorequest Mar 29 '16 at 10:16
The correct solutions are documented here: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build. If they don't work for you, file an issue in the React repo and we will try to help you. – Dan Abramov Nov 07 '17 at 11:21

score 17 · Answer 3 · answered Apr 18 '16 at 13:34

I posted this elsewhere but, frankly, here would be a better place.

Assuming you install React 15.0.1 with npm, import react from 'react' or react = require('react') will run ./mode_modules/react/lib/React.js which is React's raw source.

The React docs suggest you use ./mode_modules/react/dist/react.js for development and react.min.js for production.

Should you minify /lib/React.js or /dist/react.js for production, React will display a warning message that you've minified non-production code:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-redux behave similarly. Redux displays a warning message. I believe react-dom does too.

So you are clearly encouraged to use the production version from /dist.

However if you minify the /dist versions, webpack's UglifyJsPlugin will complain.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

You cannot avoid this message because UglifyJsPlugin can only exclude webpack chunks, not individual files.

I use the both the development and production /dist versions myself.

Webpack has less work to do and finishes a bit sooner. (YRMV)
React docs say /dist/react.min.js is optimised for production. I've read no proof that 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify does as good a job as '/dist/react.min.js`. I've read no proof you get the same resulting code.
I get 1 warning message from uglify rather than 3 from the react/redux ecosystem.

You can have webpack use the /dist versions with:

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

If running from webpack cli: const IS_PRODUCTION = process.argv.indexOf('-p') !== -1; — Greg, Oct 20 '16 at 19:03
**This is not the recommended solution (source: I work on React).** The correct solutions are documented here: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build. If they don't work for you, file an issue in the React repo and we will try to help you. — Dan Abramov, Nov 07 '17 at 11:21

Senthil · Answer 4 · 2016-06-23T01:27:58.540

5

For webpack based build, I used to setup separate webpack.config.js for DEV and PROD. For Prod, resolve the alias as below

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

You can find the working one from here

edited Jun 23 '16 at 01:27

answered Jun 23 '16 at 01:16

Senthil

1,499
16
17

2

**This is not the recommended solution (source: I work on React).** The correct solutions are documented here: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build. If they don't work for you, file an issue in the React repo and we will try to help you. – Dan Abramov Nov 07 '17 at 11:20

score 1 · Answer 5 · answered Apr 14 '16 at 12:59

1

If you're working from something like this ReactJS.NET / Webpack tutorial, you can't use process.env to switch React development mode on/off as far as I can tell. This sample links to react.js directly (see Index.cshtml), so you just have to pick .min.js or the non-minified variant by changing the URL.

I'm not sure why that is the case, because the sample's webpack.config.js has a comment that seems to imply the externals: { react: 'React' } would do the job, but then goes ahead and includes react directly into the page.

answered Apr 14 '16 at 12:59

Roman Starkov

59,298
38
251
324

If I have guessed it right, you are saying that if you bundling and minifying using ReactJS.Net, it will not benefit minifying react.js development file. For that while bundling using #IF DEBUG checks, one has to explicitly change URL to production file of react.js provided from the Facebook downloads page. Similar the case with react-dom and Redux. Am I right? – Faisal Mq May 01 '16 at 11:25
@FaisalMushtaq That's part of it; depending on how you include react.js you may have to explicitly switch to the minified version. But what I really wanted to say is that it's possible to have React set up in such a way that the "official" way of turning on development mode won't work. – Roman Starkov May 20 '16 at 12:54

score 1 · Answer 6 · answered Aug 13 '19 at 16:58

For only Webpack v4 users:

Specifying mode: production and mode: development in your Webpack config will define process.env.NODE_ENV using the DefinePlugin by default. No additional code necessary!

webpack.prod.js (taken from docs)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

And in our JS:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Webpack Docs: https://webpack.js.org/guides/production/#specify-the-mode

score 1 · Answer 7 · answered Feb 02 '20 at 13:05

I use a manual build process that runs through Webpack, so it was a two-step process for me:

Set the environment variable from package.json using the cross-env package:

"scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }
Change the webpack.config.js file to use the environment variable (which is passed-on to React to determine if we are in development or production mode), and disable minimizing the produced bundle if we are in development mode so we can see the actual names of our components. We need to use webpack's optimization property in our webpack.config.js file for this:

optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0.0, node v10.16.14

How to turn on/off ReactJS 'development mode'?

7 Answers7

webpack

Browserify

Result

Bonus

Linked