[Bug]: Hard Refresh on Saving index.js and App.js with rsbuild

[girishvisaero]

Version

System: Window
Browser: Chrome
npmPackages:
react-router-dom:4.0
and others node js 16.13

Details

Description:

After migrating my project from react-scripts v4 to rsbuild (currently using version 0.1.0-rc.1), I noticed the following issues:

Hard Refresh on index.js and App.js Changes: When making changes to the index.js or App.js files, the application performs a full page reload instead of utilizing Hot Module Replacement (HMR).

Expected Behavior: The changes should trigger HMR, similar to how it works for nested components and routes. Current Behavior: HMR works as expected for child components called via routes or nested within App.js. However, any changes in index.js and App.js result in a hard refresh. No Errors for Undeclared Variables: Another critical issue is that undeclared variables are not throwing any errors during the build process.

Expected Behavior: The build should fail or at least throw an error if there are undeclared variables in the code. Current Behavior: The build process completes successfully even when there are undeclared variables, which leads to potential runtime issues. Steps to Reproduce:

Migrate a React project from react-scripts v4 to rsbuild version 0.1.0-rc.1. Make a change in the index.js or App.js files and observe the behavior on save. Introduce an undeclared variable in the codebase and attempt to build the project. Additional Information:

This issue is critical as it affects the development experience and the reliability of the build process. The behavior observed is inconsistent with the expected functionality of rsbuild, especially regarding error handling for undeclared variables. Environment:

rsbuild version: 1.0.0-rc.1 React version: Migrated from react-scripts v4 Node.js version: 16

Reproduce link

N/A

Reproduce Steps

Steps to Reproduce: Issue 1: Hard Refresh on index.js and App.js Changes Setup:

Start with a React project that was originally using react-scripts v4. Migrate the project to use rsbuild version 1.0.0-rc.1. Observe HMR:

Run the project using rsbuild. Make a simple change in any nested component (e.g., a component loaded via routes within App.js). Observe that Hot Module Replacement (HMR) works as expected—no hard refresh occurs, and the change is reflected immediately. Trigger the Issue:

Now, make a change in the index.js file (e.g., modifying an import or adding a console log). Save the file and observe the behavior in the browser. Similarly, make a change in App.js (e.g., modifying a state or prop) and save. Observe that both changes result in a full page reload instead of using HMR. Issue 2: No Errors for Undeclared Variables Setup:

Ensure the project is set up with rsbuild version 1.0.0-rc.1. Introduce an Error:

Open any JavaScript or JSX file in the project. Introduce an undeclared variable (e.g., use a variable that hasn’t been defined or imported). Trigger the Build:

Attempt to build the project using the rsbuild command. Observe the build process to see if any errors related to the undeclared variable are thrown. Review the Build Output:

Notice that the build completes successfully, and no errors are reported for the undeclared variable.

[github-actions[bot]]

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

[girishvisaero]

if we just migrate it removing react-script version 4 we can and implement some changes in index.js or app.js it get's hard refresh, HMR doesn't work root level files.

[girishvisaero]

config file: >>

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';

const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

export default defineConfig({
  plugins: [pluginReact(), pluginSvgr({ mixedImport: true })],
  html: {
    template: './public/index.html',
  },
  output: {
    distPath: {
      root: 'build',
    },
  },
  source: {
    define: publicVars,
  },
  server: {
    open: 'http://localhost:<port>/',
  },
  dev: {
    hmr: true,
    client: {
      host: 'localhost',
      protocol: 'ws',
      overlay: true,
    },
  },
  tools: {
    rspack: {
      module: {
        rules: [
          {
            // Match .png asset
            // You can change this regular expression to match different types of files
            test: /\.png$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[name].[hash][ext]',
            },
          },
        ],
      },
    },
  },
});

[girishvisaero]

package.json

{
  "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",
    "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",
    "rsbuild": "env-cmd -f .env rsbuild build",
    "rsbuild:stage": "env-cmd -f .env.stage rsbuild build",
    "rsbuild:uat": "env-cmd -f .env.uat rsbuild build",
    "rsbuild:prod": "env-cmd -f .env.prod 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"
  },
  "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-rc.0",
    "@rsbuild/plugin-react": "^1.0.1-rc.0",
    "@rsbuild/plugin-svgr": "^1.0.1-rc.0",
    "env-cmd": "^10.1.0"
  }
}

trying to migrate this project in rsbuild and this is the production level code currently using rsbuild for staging and development purpose, once it is stable we will remove react-scripts.

[9aoy]

Undeclared variable errors are reported by eslint. You can use rsbuild-plugin-eslint and add no-undef rule.

[girishvisaero]

Oops! Thanks for the suggestion, I have been getting those errors recently and without even those errors i was able to make the build.

again Thanks for the undeclared errors help

[girishvisaero]

I don't know if this is the issue of my config or not but I guess I am using wrong configuration, right now until it will get stable i want to use react-scripts as well as rsbuild once it is stable I will remove the react scripts.

[girishvisaero]

Undeclared variable errors are reported by eslint. You can use rsbuild-plugin-eslint and add no-undef rule.

is there any biom plugin available for this?

because I see there is a performance issue when we use eslint plugin for this.

I resolved all the issues coming from the eslintPlugin,

Additionally, is there any way to override all and just use no-undef rule

// .eslintrc

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "plugin:react/jsx-runtime"
  ],
  "rules": {
    "no-undef": "error",
    "quotes": "off",
    "semi": "off",
    "comma-dangle": "off",
    "no-console": "off",
    "prefer-const": "off",
    "no-unused-vars": "off",
    "eol-last": "off",
    "object-curly-spacing": "off",
    "quote-props": "off",
    "indent": "off",
    "no-trailing-spaces": "off",
    "no-debugger":"off",
    "spaced-comment": "off",
    "space-before-function-paren": "off",
    "camelcase": "off",
    "no-multiple-empty-lines": "off",
    "padded-blocks": "off",
    "key-spacing": "off",
    "lines-between-class-members": "off",
    "react/no-unescaped-entities":"off",
    "no-useless-return":"off",
    "node/handle-callback-err": "off",
    "comma-spacing": "off",
    "no-useless-escape": "off",
    "block-spacing": "off",
    "no-empty": "off",
    "no-extra-boolean-cast": "off",
    "comma-style": "off",
    "no-mixed-spaces-and-tabs": "off",
    "no-unneeded-ternary": "off",
    "no-prototype-builtins": "off",
    "object-curly-newline": "off",
    "dot-location": "off",
    "import/no-duplicates": "off",
    "no-tabs": "off",
    "arrow-spacing": "off",
    "no-useless-computed-key": "off",
    "prefer-regex-literals": "off",
    "operator-linebreak": "off",
    "multiline-ternary": "off",
    "brace-style":"off",
    "no-multi-spaces":"off",
    "object-property-newline": "off",
    "semi-spacing": "off",
    "no-lone-blocks": "off",
    "no-redeclare": "off",
    "dot-notation": "off",
    "react/jsx-key": "off",
    "space-in-parens": "off",
    "array-callback-return": "off",
    "no-return-assign": "off",
    "space-infix-ops": "off",
    "space-before-blocks": "off",
    "keyword-spacing": "off",
    "react/no-unknown-property": "off",
    "eqeqeq": "off",
    "array-bracket-spacing": "off",
    "no-dupe-keys": "off",
    "react/jsx-no-duplicate-props": "off",
    "react/no-string-refs": "off",
    "curly": "off",
    "no-fallthrough": "off",
    "no-sparse-arrays": "off",
    "no-mixed-operators": "off",
    "no-unreachable-loop": "off",
    "react/jsx-no-target-blank": "off",
    "no-dupe-class-members": "off",
    "no-whitespace-before-property":"off",
    "use-isnan": "off",
    "no-self-assign": "off",
    "no-use-before-define": "off",
    "space-unary-ops": "off",
    "one-var": "off",
    "no-var": "off",
    "yoda": "off",
    "no-constant-condition": "off",
    "react/display-name": "off",
    "react/no-direct-mutation-state": "off",
    "react/prop-types": "off" // Disable PropTypes validation
  }
}

[girishvisaero]

I created Eslint config and some rules had been added for warn but there are performance issue while render or performing Eslint operations so I just turned all off. Please correct me if I am wrong.

[github-actions[bot]]

As the issue was labelled with need reproduction, but no response in 5 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions. For background, see Why reproductions are required.

由于该 issue 被标记为 "需要重现"，但在 5 天内没有回应，因此该 issue 将被关闭。如果你有任何进一步的问题，请随时发表评论并重新打开该 issue。背景请参考 为什么需要最小重现。