[Bug]: Hard Refresh on Saving index.js and App.js with rsbuild #3336
Description
Version
System: Window
Browser: Chrome
npmPackages:
react-router-dom:4.0
and others node js 16.13Details
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.