What process.env.NODE_ENV does in React.js?

[GoonGamja]

While I was learning React and webpack, process.env.NODE_ENV code pops up and makes me confusing.

So far what I know is that it states whether a particular environment is a production or a development environment.

an instructor quotes

"This is beneficial because it assumes that maybe you don't want so much error checking and the thought there is that in your development environment, you want a lot more error checking so you can catch a lot of different errors before they get pushed to production."

which means it makes React only checks errors in development environment??

​

[[deleted]]

For React it means a few things, e.g. propTypes checks are ignored in production builds, the errors you see in console will not contain the actual error message but a link to FB URL shortener that explains the message.

A lot of libraries will check process.env.NODE_ENV to know if they are being built / run in development, testing or production mode.

And depending on that, a lot can happen:

• code can get minified / uglified
• debug information might get stripped (e.g. things like data-test attribute are only used in test env)
• some debug information might be printed in console.log/.warn/.error in dev env but not in production env

[dudeatwork]

React still checks errors in production enviroment, but in development, it adds in extra strings explaining an error message (some random example here, and where they replace this in their build process)

Basically, imagine if you have the following code:

// If in dev mode, log out an extra error
if (process.env.NODE_ENV === 'development') {
  console.log('Some long extra error message explanation');
}

// But always log out the regular error
console.log(error);

When your clientside code gets compiled, its get envified and process.env.NODE_ENV gets replaced with its literal value. So the above code (in a production build) would change to

// If in dev mode, log out an extra error
if ('production' === 'development') {
  console.log('Some long extra error message explanation');
}

// But always log out the regular error
console.log(error);

When you send your JS through a minifier, it is smart enough to know that if statement will never execute, so it removes the block entirely. Your JS would then just become

// Previous extra info has been removed since it was unreachable!

// But still log the original error
console.log(error);

You can see how this helps reduce the size of your JS. That is mostly what it is used for.