Skip to content

Hot reload error with React Router v7 BrowserRouter #4082

@efriandika

Description

@efriandika

Describe the bug

Use:

  • Latest rsbuild version 1.5.10
  • Latest react version 19.1.1
  • Latest react-router in exposed component
  • use latest @module-federation/rsbuild-plugin

Or clone and run the Reproduction repro.

You will get this error when you just ran: 'yarn dev'. Once you refresh the page / ctrl + r, the error will be gone, then the project is working as expected.

EventSource failed loading: GET "http://localhost:3001/lazy-compilation-using-lazy-compilation-proxy%7Cbuiltin%3Areact-refresh-loader!builtin%3Aswc-loader%3F%3FruleSet%5B1%5D.rules%5B5%5D.use%5B0%5D!%2FUsers%2Fo772022%2FWorkspace%2FPlaygrounds%2Freact-provider%2Fsrc%2Fbootstrap.tsx".
hot_module_replacement:60 undefined factory webpack/sharing/consume/default/react/react?60ea
overrideMethod @ hook.js:608
__webpack_require__ @ refreshUtils.js:311
fn @ hot_module_replacement:60
(anonymous) @ react-jsx-dev-runtime.development.js:287
./node_modules/react/cjs/react-jsx-dev-runtime.development.js @ react-jsx-dev-runtime.development.js:349
__webpack_require__ @ refreshUtils.js:311
fn @ hot_module_replacement:60
./node_modules/react/jsx-dev-runtime.js @ jsx-dev-runtime.js:6
__webpack_require__ @ refreshUtils.js:311
fn @ hot_module_replacement:60
./src/bootstrap.tsx @ App.tsx:12
__webpack_require__ @ refreshUtils.js:311
fn @ hot_module_replacement:60
Promise.then
./src/bootstrap.tsx!lazy-compilation-proxy @ src_bootstrap_tsx_lazy-compilation-proxy.d7ef8967ba11eb38.hot-update.js:5
__webpack_require__ @ refreshUtils.js:311
_requireSelf @ hot_module_replacement:101
apply @ jsonp_chunk_loading:417
(anonymous) @ hot_module_replacement:320
internalApply @ hot_module_replacement:318
(anonymous) @ hot_module_replacement:263
waitForBlockingPromises @ hot_module_replacement:217
(anonymous) @ hot_module_replacement:261
Promise.then
(anonymous) @ hot_module_replacement:260
Promise.then
(anonymous) @ hot_module_replacement:240
Promise.then
hotCheck @ hot_module_replacement:231
tryApplyUpdates @ hmr.js:72
handleSuccess @ hmr.js:36
onMessage @ hmr.js:101
refreshUtils.js:311 Uncaught (in promise) Error: RuntimeError: factory is undefined (webpack/sharing/consume/default/react/react?60ea)
    at __webpack_require__ (refreshUtils.js:311:1)
    at fn (hot_module_replacement:60:1)
    at react-jsx-dev-runtime.development.js:287:1
    at ./node_modules/react/cjs/react-jsx-dev-runtime.development.js (react-jsx-dev-runtime.development.js:349:1)
    at __webpack_require__ (refreshUtils.js:311:1)
    at fn (hot_module_replacement:60:1)
    at ./node_modules/react/jsx-dev-runtime.js (jsx-dev-runtime.js:6:1)
    at __webpack_require__ (refreshUtils.js:311:1)
    at fn (hot_module_replacement:60:1)
    at ./src/bootstrap.tsx (App.tsx:12:1)

Reproduction

https://github.com/efriandika/rsbuild-issue-repro

Used Package Manager

yarn

System Info

System:
    OS: macOS 26.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.14 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.1 - ~/.nvm/versions/node/v20.19.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.19.1/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.1/bin/npm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 26.0

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions