[Bug]: Crashes My React 16 App When Upgraded to rsbuild / plugin-react 1.0.1-beta.13, but Works with plugin-react and rsbuild v1.0.1-beta.11

[girishvisaero]

Version

system: window,
browser: chrome,
packages: 

{
  "name": "MY-APP",
  "version": "3.4.27",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.3.0",
    "@date-io/date-fns": "^1.3.13",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@stripe/stripe-js": "^1.11.0",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.8.4",
    "array-find-index": "^1.0.2",
    "axios": "^0.21.1",
    "base-64": "^1.0.0",
    "bootstrap": "^4.5.3",
    "capitalize-the-first-letter": "^1.0.8",
    "chart.js": "^3.6.2",
    "dangerously-set-html-content": "^1.0.9",
    "dompurify": "^2.3.3",
    "formik": "^2.2.9",
    "history": "^5.0.0",
    "js-file-download": "^0.4.12",
    "mdbreact": "^4.27.0",
    "moment": "^2.29.1",
    "mui-formik": "^0.1.1",
    "multiselect-react-dropdown": "^1.6.3",
    "otp-generator": "^2.0.0",
    "otp-timer": "^1.1.5",
    "qrcode.react": "^3.0.1",
    "react": "^16.13.1",
    "react-axios": "^2.0.4",
    "react-bootstrap": "^1.4.0",
    "react-chartjs-2": "^4.0.0",
    "react-countdown": "^2.3.2",
    "react-cropper-image-editor": "^1.0.10",
    "react-date-range": "^1.4.0",
    "react-datepicker": "^4.8.0",
    "react-datetime-picker": "^3.0.4",
    "react-dom": "^16.13.1",
    "react-draggable-resizable-modal": "^0.1.2",
    "react-file-picker": "0.0.6",
    "react-ga": "^3.3.1",
    "react-hook-form": "^7.52.2",
    "react-image-gallery": "^1.0.8",
    "react-image-magnify": "^2.7.4",
    "react-otp-input": "^2.4.0",
    "react-otp-timer": "^0.1.0",
    "react-pdf-js": "^5.1.0",
    "react-quill": "^2.0.0",
    "react-router": "^5.2.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "^4.0.3",
    "react-simple-keyboard": "^3.4.70",
    "react-timer": "^1.1.1",
    "reactjs-tag-input": "^2.0.15",
    "rn-otp-timer": "^1.0.1",
    "sha256": "^0.2.0",
    "simple-keyboard": "^3.4.56",
    "simple-keyboard-layouts": "^3.1.58",
    "styled-components": "^5.3.6",
    "sweetalert2": "^10.14.1",
    "web-vitals": "^0.2.4",
    "xlsx": "^0.16.9",
    "yup": "^0.32.11"
  },
  "scripts": {
    "dev": "env-cmd -f .env rsbuild dev",
    "build:rsbuild": "env-cmd -f .env rsbuild build",
    "inspect": "rsbuild inspect --mode production",
    "preview": "rsbuild preview",
    "start": "env-cmd -f .env react-scripts start",
    "build:stage": "env-cmd -f .env.stage react-scripts build",
    "build:uat": "env-cmd -f .env.uat react-scripts build",
    "build:prod": "env-cmd -f .env.prod react-scripts build",
    "build": "env-cmd -f .env.stage react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "biome format --write ./src",
    "lint": "biome lint --write ./src",
    "check": "biome check --write ./src"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@biomejs/biome": "1.8.3",
    "@rsbuild/core": "^1.0.1-beta.13",
    "@rsbuild/plugin-react": "^1.0.1-beta.13",
    "@rsbuild/plugin-svgr": "^1.0.1-beta.11",
    "env-cmd": "^10.1.0"
  }
}

Details

Description: After upgrading our project to use rsbuild and plugin-react version 1.0.1-beta.13, the build process crashes and fails to run correctly. In contrast, the project works as expected with rsbuild and plugin-react version 1.0.1-beta.11. This issue is critical as it impacts the production build process for our React 16 application.

Expected Behavior: The project should build and run successfully with rsbuild and plugin-react version 1.0.1-beta.13, similar to how it works with version 1.0.1-beta.11.

Actual Behavior: The project crashes or fails to build correctly when using rsbuild and plugin-react version 1.0.1-beta.13. The specific errors or issues encountered prevent the application from running properly.

Reproduce link

-

Reproduce Steps

1. Migrate the project to use rsbuild and plugin-react version 1.0.1-beta.11.
2. Run bun dev to verify that the build process works as expected.
3. Upgrade rsbuild and plugin-react to version 1.0.1-beta.13.
4. Attempt to run bun dev again.
5. Observe that the build process crashes or fails.

[github-actions[bot]]

Hello @girishvisaero. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

[witsaint]

Hai @chenjiahan ,I noticed that, too. The exception message was ReferenceError: process is not defined

Here's reproduction

#3206

The steps ：

1: pnpm devScript

You can find err be log

But, When you set mode be development in scripts/dev.js， Running fine，

I think the reason is that process.env is not Defined

Do you have any suggestions that you can give me so that I can help solve the problem

[chenjiahan]

This is a bug of Rsbuild's default mode, I will fix it

[witsaint]

Hai @girishvisaero , You can try to do it, Then tell us the result

[girishvisaero]

Sure I am gonna try it again. With the latest Rsbuild version, actually I was green harmony link error and crypto errors. It was working perfectly with an old build of rsbuild but the current version I think there are some changes breaking my it.

[chenjiahan]

Try the new release: https://github.com/web-infra-dev/rsbuild/releases/tag/v1.0.1-beta.14