Does single-spa root require AMD?

[misha-antoshchuk]

Hey @joeldenning, have noticed that system-js amd plugin is added to create-single-spa root template by default. I went throught initial pr and could not find an explanation why amd was added.

One of our microfrontend apps conflicts with amd. As far as I understand, amd is optional, but before stripping off our single-spa root config wanted to make sure amd is not required by the single-spa root itself.

Thanks in advance!

[joeldenning]

The amd.js extra is not needed in every case, but it was included because it's often needed. For example, loading the official versions of react properly is easiest to do with the amd.js extra (although using the esm-bundle version of react also works). The amd.js extra creates the window.define global variable, which can cause problems for apps using requirejs, or for apps that load global libraries via script tag but are in UMD format.

The UMD format, which is popular for libraries published to npm, first checks whether window.define is present. If so, it calls window.define. Otherwise, it creates a global variable. In the case of popular libraries like jQuery that are usually needed as global variables, the presence of window.define will make it so that window.jQuery and window.$ are not defined. To work around that problem, you can remove the amd.js extra, or move the global <script> for jquery to be above the amd.js <script>. The order does matter, since jquery (and other UMD libraries) will create the global variable if loaded before amd.js is present, and will not otherwise.

In my own projects and consulting, I sometimes just remove the amd.js extra entirely because then there are no compatibility issues like that. However, the downside is that you can't reliably load UMD libraries like react or vue2 without finding a System.register version of them. The https://github.com/esm-bundle project exists to help people find, and you can also use the JSPM CDN which has System.register versions of all libraries on npm. See https://single-spa.js.org/docs/recommended-setup#sharing-with-import-maps and https://github.com/systemjs/systemjs/blob/master/docs/module-types.md for more info.

[misha-antoshchuk]

Thank you for such a detailed reply!