143

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.

Improve this question
1

7 Answers 7

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

On react documentation explains as well facebook.github.io/react/docs/…
Do you really need JSON.stringify('production') there? Or is just 'production' enough?
@VladNicula it needs to be '"production"' ie. double quoted, stringify does that for you
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 =)
Just found out that this DefinePlugin use can be replaced with new webpack.EnvironmentPlugin(['NODE_ENV'])
|
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

Improve this answer

9 Comments

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.
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)!
@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.
I just wanted to add on this that the addon version does not seem to have development mode turned on, even the unminified version.
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.
|
17

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')) } }
Improve this answer

2 Comments

If running from webpack cli: const IS_PRODUCTION = process.argv.indexOf('-p') !== -1;
This is not the recommended solution (source: I work on React). The correct solutions are documented here: reactjs.org/docs/…. If they don't work for you, file an issue in the React repo and we will try to help you.
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

Improve this answer

1 Comment

This is not the recommended solution (source: I work on React). The correct solutions are documented here: reactjs.org/docs/…. If they don't work for you, file an issue in the React repo and we will try to help you.
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.

Improve this answer

2 Comments

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?
@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.
1

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

Improve this answer

Comments

1

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

  1. 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" }

  2. 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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.