Systemjs: Unable to share the dependencies to the micro-frontends from root application using single-spa

[vijayapalponram]

Have excluded one of my internal library from the child applications by adding externals in their webpack configuration

How can i register that internal library in root application before the child application is started by single-spa?

For example, my child application bundle is looking like the below
define("childApp1", ["library1"], .....]

Have created import-maps json and added childApp1 there, so my rootapplication is able to load childApp1. Now the systemJS is failing to execute the childApp1 module, since library1 is dependent.

So how can i solve this?

[joeldenning]

How can i register that internal library in root application before the child application is started by single-spa?

You do not need to register the internal library in the root application. Everything should work with what you've described.

If you want to ensure the internal library is loaded as soon as possible, you can simply add System.import('internal-library') to your root config and it will ensure that it is downloaded and executed as soon as possible.

Alternatively, you can add a <link rel="preload" href="/path-to-internal-lib.js"> to your HTML file.

The final option is to use depcache. See https://github.com/systemjs/systemjs/pull/2134 which will add the ability to specify dependencies in your import map so that they all get loaded upfront instead of waterfall.

All of these options are not necessary - they are performance optimizations but should not cause things to break. I am closing this issue since I think I've answered this question, but feel free to comment further or reopen.

[joeldenning]

Note that this is very similar / duplicate of https://github.com/single-spa/single-spa/issues/472

[vijayapalponram]

Thanks @joeldenning for your immediate response.

I think, i have not cleared mentioned my problem.

Will tell the real problem with the react & react-dom package.

Consider i am having two child applications, childApp1 & childApp2
I have excluded the react & react-bundle in my webpack config of both applications, so these dependencies will not be bundled with the applications, am i right?

And i have registered both applications in my parent application as usual.

Now, if i try to navigate to childApp1, i am getting error like below,

Now what should i do?

[vijayapalponram]

As you said, if i have to add react & react-dom to the import-maps, i agree.

But i dont want to specify the remote CDN for those, instead of, i would like to build the CDN files in my local and refer the same like below,

But i am getting the below error,

[vijayapalponram]

can you please re-open this issue?

[vijayapalponram]

Am i doing anything wrong with the local CDN file generation? or with import-mapping?

confused a lot!!!!

Need your help on this.

[joeldenning]

@vijayapalponram Use the AMD and named-exports extras. Then be sure to use the UMD version of react. That will make them work.

Here are two examples where systemjs + react are working:

• https://github.com/systemjs/systemjs-examples/tree/master/loading-code/react-hello-world
• https://github.com/react-microfrontends/