Skip to content

[Feature]: support runtimeChunk: 'single' with ESM format #10810

@lzxb

Description

@lzxb

What problem does this feature solve?

In ESM-based micro-frontend architecture, we need to solve the following issues:

  1. Multiple entries need to share the same runtime to avoid duplicate loading and memory waste
  2. HMR support is required in development environment for better development experience
  3. Maintain compatibility with ESM specification to ensure production correctness
  4. Support different ESM output formats (modern-module and module) for various use cases

Current issues:

  1. When runtimeChunk: "single" is enabled, errors occur due to JSONP injection in ESM environment
  2. When runtimeChunk: "single" is disabled, each entry has its own runtime and HMR doesn't work
  3. 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:

  1. Clone the repository
  2. pnpm install
  3. pnpm dev
  4. Try to modify any Vue component

Current behavior

  1. 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
  2. With runtimeChunk: "single" disabled:
    • HMR doesn't work for Vue components (e.g., HelloWorld.vue)
    • Runtime sharing between entries is not possible

Expected behavior

  1. Runtime chunk should be imported using ESM imports (import "./runtime.mjs") in each entry
  2. Multiple entries should share the same runtime chunk
  3. HMR should work properly with ESM format
  4. Both modern-module and module formats should be fully supported

Technical details

The issue is related to runtime chunk handling in ESM format:

  1. Currently using JSONP method for runtime injection
  2. Should use ESM imports in ESM context
  3. Need to handle both modern-module and module formats correctly
  4. This affects the proper implementation of multi-entry applications

Related issues

Metadata

Metadata

Assignees

Labels

featNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions