How to use SystemJS with Import Maps?

The way the window scope works on your browser. Similarly, SystemJS work on a global variable 'System'.

• To register a module you do 'System.register()'
• To import a module you do 'System.import()'

The setup for Micro Frontend can be achieved with browser-supported ESM with Web Components but ReactJS and Webpack are not built in that way.

For simple implementation the index:

Relevant JS File:

Import map and System.import

Basic import map index:

Notice that JS is not imported with 'script' tag but rather with 'System.import("myApp")'.

The JS is the same with the import map technique:

Import map and Externals

The externals can be added in importmap and passed as a dependency with your 'System.register()' like this:

Dependency is added like this in js file:

All this information was not mandatory for your ReactJS setup but was essential to get through how SystemJS works