[Bug]: When there are multiple entrances, there is a hot update error

[lzxb]

System Info

System:
OS: macOS 15.3
CPU: (8) arm64 Apple M1
Memory: 107.86 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.11.0/bin/yarn
npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
pnpm: 10.6.2 - ~/.nvm/versions/node/v22.11.0/bin/pnpm
bun: 1.1.27 - ~/.bun/bin/bun
Browsers:
Safari: 18.3
npmPackages:
@rspack/cli: ^1.2.8 => 1.2.8
@rspack/core: ^1.2.8 => 1.2.8

Details

Reproduce link

https://github.com/lzxb/rspack-hot-error

Reproduce Steps

Rspack project

Setup

Install the dependencies:

pnpm install

Get started

Start the dev server:

pnpm run dev

Build the app for production:

pnpm run build

[lzxb]

Hello, is there a plan to handle this issue? Or is there any temporary patching method?

webpack/webpack-dev-server#5443

[alexander-akait]

@lzxb it is not a bug, it is how multiple entries work, your configuration is wrong and no need to patch something

The answer is here - webpack/webpack-dev-server#5443 (comment)

@chenjiahan I think you can close this issue

[chenjiahan]

Thank you, I have converted this issue to a discussion since it's not a bug

[lzxb]

@alexander-akait I'm using Rspack's entry and externals to build an importmap-based application. Each entry compiles into an ESM module, and the externals configuration links different exported modules together. This serves as the foundation for building large-scale micro-frontend applications based on ESM.

[lzxb]

This is the simplest example of building an ESM micro-frontend application.

[lzxb]

I created a project at https://github.com/esmnext/esmx and planned to implement it, but got stuck on hot updates for multiple entry points.

[alexander-akait]

@lzxb Did you read my comments how multiple entries work? You can't use multiple runtimes on the same page

[alexander-akait]

You mix libraries and applications, vue is a library and don't need runtime at all for it, main.ts is an application, but you are using everything as separate pages, like you have vue.html/app.html/main.html, there are no fixes, it is a wrong configuration

app.vue can't work without vue, main.ts can't work without app.vue, but you don't specify it

[lzxb]

Multiple Entry Hot Update Issue in Rspack

Background

Traditionally, Rspack is used to build a single application:

// Traditional way: one entry per application
entry: {
  main: './src/main.ts'
}

However, in our scenario, we need to use Rspack's multiple entry capability to build one application:

// Our approach: multiple entries in one application
entry: {
  header: './src/header.ts',
  content: './src/content.ts',
  sidebar: './src/sidebar.ts',
  // Shared modules for other micro-frontend projects
  components: './src/components/index.ts',
  utils: './src/utils/index.ts'
}

This multi-entry approach serves two purposes:

1. Page Composition: Load different parts of the application independently
2. Module Sharing: Export shared modules (like components and utilities) that can be consumed by other micro-frontend projects

For example:

<!-- Current application -->
<script type="module" src="/header.js"></script>
<script type="module" src="/content.ts"></script>
<script type="module" src="/sidebar.ts"></script>

<!-- Other micro-frontend projects can import our shared modules -->
<script type="module">
  import { Button, Input } from 'app1/components'
  import { formatDate } from 'app1/utils'
</script>

Issue Description

Current Rspack hot update mechanism has a limitation: hotUpdateGlobal only implements application-level isolation.

This means within the same application:

1. All entries share the same hot update global variable
2. Later registered entries override earlier ones
3. Results in only one entry receiving hot updates while others fail

Solution

We need to add entry-level isolation on top of application-level isolation:

// Before: application-level isolation
window["webpackHotUpdateApp"]

// After: application + entry dual isolation
window["webpackHotUpdateApp_header"]
window["webpackHotUpdateApp_content"]
window["webpackHotUpdateApp_sidebar"]
window["webpackHotUpdateApp_components"]
window["webpackHotUpdateApp_utils"]

This way each entry can:

1. Have its own independent hot update handler
2. Not interfere with other entries
3. Properly receive and process hot update messages

This improvement is particularly important when:

• Developing shared modules that multiple projects depend on
• Making changes to components that are used across different micro-frontends
• Ensuring that hot updates work correctly for both local modules and shared modules

While this change is small, it's crucial for projects utilizing Rspack's multiple entry capability, especially in a micro-frontend architecture where module sharing is essential.

[alexander-akait]

Just use multi compiler mode and it was literally made for this and there is no need to complicate the code of the tools and look for workarounds for what they were not designed for

While this change is small, it's crucial for projects utilizing Rspack's multiple entry capability, especially in a micro-frontend architecture where module sharing is essential.

Multiple entry is not micro-frontend, because you will faced with more complex things, like shared module, preloading and etc

[lzxb]

You're right, this is not the right direction

[lzxb]

This issue has been confirmed and the Rspack team will support runtimeChunk: 'single' + ESM and ESM HMR in future releases.
Related issues:
#10810
#7429

[lzxb]

I will record the problems encountered by Rspack in building large-scale ESM applications in esmnext/esmx#80

[alexander-akait]

@lzxb Please provide your configuration and structure where you have problems, because I really can't understand which problems do you have and trying to solve

[lzxb]

You can see：#10810 And #7429

[lzxb]

Once these two issues are resolved, I will receive the most perfect support

[alexander-akait]

Webpack implements these (future 5.100.0 version), so rspack can take the same logic

[lzxb]

I am looking forward to using it to build an application based on ESM and importmap.

[lzxb]

I've spent nearly a year exploring Rspack's ESM and have successfully deployed it in a production environment. However, there are still some issues that need to be addressed to make it better.