Migration Guide from System.js to ESM

[primeapple]

Hi everyone!

I work on a Project that has a microfrontend with around 30 packages. They are bundled based on the official webpack config for single spa react. As Version 5 of this config came out, you guys switched from System.js to ESM per default.

In the changelog https://github.com/single-spa/create-single-spa/blob/main/packages/webpack-config-single-spa-react/CHANGELOG.md#major-changes-1 you stated that

The single-spa core team plans to release a full SystemJS -> ESM migration guide on single-spa.js.org.

I want to ask if this is still on the roadmap. We are planning to switch to ESM to enable vite support for some of our microfrontends (as well as getting rid of dependencies to e.g. system.js).

If it is not on the roadmap anymore, are there some general guidelines on how to move from system.js to ESM? What to look out for, what to change.

Thanks for your work on this project.

[joeldenning]

Hi @primeapple - yes a migration guide is still on the roadmap. For the root config, see react-microfrontends/root-config#46 as an example. The import-map-injector library is encouraged, rather than es-module-shims. For an individual microfrontend, see react-microfrontends/planets#47

I'll keep this issue open to track the updated documentation on single-spa.js.org for this

[joeldenning]

See single-spa/single-spa.js.org#664

[joeldenning]

single-spa/single-spa.js.org#664 has been updated with VueJS documentation. The vue-microfrontends example has been updated to native modules.