Open
Description
What problem does this feature solve?
In ESM-based micro-frontend architecture, we need to solve the following issues:
- Multiple entries need to share the same runtime to avoid duplicate loading and memory waste
- HMR support is required in development environment for better development experience
- Maintain compatibility with ESM specification to ensure production correctness
- Support different ESM output formats (modern-module and module) for various use cases
Current issues:
- When
runtimeChunk: "single"
is enabled, errors occur due to JSONP injection in ESM environment - When
runtimeChunk: "single"
is disabled, each entry has its own runtime and HMR doesn't work - Runtime sharing and HMR need to work correctly in both modern-module and module formats
What does the proposed API of configuration look like?
Configuration needs to support two ESM output formats:
modern-module format
{
experiments: {
outputModule: true
},
output: {
module: true,
library: {
type: "modern-module"
}
},
optimization: {
runtimeChunk: "single"
}
}
module format
{
experiments: {
outputModule: true
},
output: {
library: {
type: "module"
}
},
optimization: {
runtimeChunk: "single"
}
}
Minimal reproduction
Repository: https://github.com/lzxb/rspack-esm-hot-error/tree/feat-hot2
Steps to reproduce:
- Clone the repository
pnpm install
pnpm dev
- Try to modify any Vue component
Current behavior
- With
runtimeChunk: "single"
enabled:- Page throws errors because runtime is injected using JSONP instead of ESM imports
- Issues occur in both modern-module and module formats
- With
runtimeChunk: "single"
disabled:- HMR doesn't work for Vue components (e.g., HelloWorld.vue)
- Runtime sharing between entries is not possible
Expected behavior
- Runtime chunk should be imported using ESM imports (
import "./runtime.mjs"
) in each entry - Multiple entries should share the same runtime chunk
- HMR should work properly with ESM format
- Both modern-module and module formats should be fully supported
Technical details
The issue is related to runtime chunk handling in ESM format:
- Currently using JSONP method for runtime injection
- Should use ESM imports in ESM context
- Need to handle both modern-module and module formats correctly
- This affects the proper implementation of multi-entry applications
Related issues
- [Feat]: HMR is not implemented for module chunk format yet #7429 (ESM HMR support)