React process.env.NODE_ENV

[maxim-semikov]

Hello!
Can anyone tell me how to use process.env in react application.
I created the app using the npm create rsbuild@latest command.
and tried to use a simple piece of code in the App.jsx file as in the documentation

  if (process.env.NODE_ENV === 'development') {
  console.log('this is a development log');
}

and I got an error: Uncaught ReferenceError: process is not defined

[chenjiahan]

Hi, I can not reproduce this issue, can you provide a reproduction repo?

[maxim-semikov]

this is repo https://github.com/maxim-semikov/rsbuild-env

[xc2]

please use process.env.NODE_ENV === 'development' instead of process?.env?.NODE_ENV === 'development'.

This is a common misconception about the "webpack definePlugin".

nowadays the term "define" in js building field typically means replacing expression instead of declare a variable.

e.g.

define: {"process.env.NODE_ENV": '"production"'} will transform process.env.NODE_ENV === 'development' into "production" === 'development' but not const process = {env: {NODE_ENV: "production"}}; process.env.NODE_ENV === 'development';

process?.env?.NODE_ENV doesn't match the expression process.env.NODE_ENV so it is not replaced.

[maxim-semikov]

Thanks!

[hussain-nz]

@maxim-semikov If you would like to safely access process.env (because some env variables aren't available), you can use:

typeof process !== "undefined" && process.env.NODE_ENV