[Bug]: Cannot build module into UMD

[peawyoyoyin]

Describe the bug

Hello,

I am trying to use Vite to build my project into a remote module-federated application. However, due to my company's policy, we cannot move to ESM yet because we still need to support old browsers.

I am trying to build the module in to UMD format, however, seems like the module-federation/vite plugin always add pre-defined chunks (loadShare / remoteInit) into final bundle, so rollup thinks it is a code-splitting build. This fails rollup's internal validation.

Other formats also do not work:

• There's a separate bug in systemJS that breaks 'system' with shared dependencies.
• 'amd' and 'cjs' also do not work because my app has shared dependencies, adding shared dependencies uses top-level await which is not supported.
• iife does not work similar to UMD.

Version

6.0.5

Reproduction

https://github.com/peawyoyoyin/mfe-vite-umd-issue-reproduction

Relevant log output

error during build:
Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[gioboa]

Thanks for your report @peawyoyoyin
Another problem with old browsers can be this one: The plugin under the hook is using async imports and I'm not sure if old browsers are supporting this.
Have you tried to use mfe with Rspack?

[peawyoyoyin]

Thank you for the prompt response.

Another problem with old browsers can be this one: The plugin under the hook is using async imports and I'm not sure if old browsers are supporting this.
Have you tried to use mfe with Rspack?

I have tried but I could not get it to work without using async import. (The remote@url syntax does not work and I had to supply a promise string instead).

I also have tried using webpack and its module federation plugin to build instead, that worked.

[peawyoyoyin]

@gioboa actually, when building into SystemJS format, the output does not seem to have plain import() calls, but instead uses SystemJS's System.import correctly.

Could you help point out which specific part use async imports, so that I can double check?

[gioboa]

If it's working with the webpack or rspack plugin, use them. Those packages are officially supported by the team.