[Bug]: can't destructure process.env

[carlomorelli]

Version

System:
OS: macOS 14.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 53.36 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 129.0.6668.100
Safari: 18.0.1
npmPackages:
@rsbuild/core: ^1.0.1 => 1.0.2
@rsbuild/plugin-node-polyfill: ^1.0.1 => 1.0.4
@rsbuild/plugin-react: ^1.0.1 => 1.0.1
@rsbuild/plugin-sass: ^1.0.1 => 1.0.1
@rsbuild/plugin-svgr: ^1.0.1 => 1.0.1

Details

I am migrating a project from CreateReactApp to RsBuild.

The original project made massive use of the REACT_APP_ injected env vars, and they were collected into a global const file structured as such:

const {
  REACT_APP_VAR1,
  REACT_APP_VAR2,
  ....
} = process.env;

export const VAR1 = REACT_APP_VAR1;
export const VAR2 = REACT_APP_VAR2;
...

In migrating to RsBuild 1.0.1 I followed the migration guide, especially the step for environment variables .

However the above injection doesn't work anymore, as the resulting VAR1 and VAR2 are undefined. To make it work, I have remove the destructuring block and write as such:

export const VAR1 = process.env.REACT_APP_VAR1;
export const VAR2 = process.env.REACT_APP_VAR2;
...

Definitely not a blocker issue, but it took me a good 2 hours to understand what was going on.

Reproduce link

.

Reproduce Steps

npm run build
-> deploy app
-> runtime error in console

[chenjiahan]

This is by design, see https://rsbuild.dev/guide/advanced/env-vars#identifiers-matching

[carlomorelli]

I see! I should have read better that part of the guide, which I was also taking a look at.

Would be the case to make the thing is highlighted also in the Migrate guide from CRA to RsBuild?

TY for the quick answer.

[chenjiahan]

The defined value is not allowed to be destructured in any build tool, this is the same in CRA (webpack) and Rsbuild (Rspack). 😄

So we do not need to highlight it in the migration guide.

[carlomorelli]

In CRA it works.

I'm migrating precisely from a CRA standard setup (with webpack) where destructuring was used on process.env ....

[chenjiahan]

Thanks for the info, I just found out that CRA replaces process.env instead of process.env.foo by default, which can increase the bundle size, so we should not do this in Rsbuild. I will update the migration guide to tell this.

https://github.com/facebook/create-react-app/blob/dd420a6d25d037decd7b81175626dfca817437ff/packages/react-scripts/config/env.js#L101-L107