SystemJS: Application died in status LOADING_SOURCE_CODE: Cannot find module

Question

So, we are in the process of setting up a larger application consisting of several React apps. We are using the single-SPA framework and got the single-spa-portal-example running.

In the example, SystemJS is included directly from portal/libs folder. We changed it to be managed via npm and after running npm update we are now using SystemJS v. 3.0.2.

The loadApp function defined in /portal/src/helper.js makes use of SystemJS.import() (changed that to import() with the same result).

Webpack is configured to serve the singleSpaEntry.js file for example at the URL http://localhost:9001/app1/src/singleSpaEntry.js (for app1) as an AMD module. It does so fine, I can open that file directly in the browser.

When opening the portal app at localhost:9000 I can also verify that the loadAppfunction is running. However, I get the following error message:

Uncaught app1: Application 'app1' died in status LOADING_SOURCE_CODE: Cannot find module '/app1/src/singleSpaEntry.js' at http://localhost:9000/main.js:12500:11

I get this error for every sub app, I have tried multiple webpack configurations but I assume this issue is either related to SystemJS itself or to the way the module should be declared in singleSpaEntry.js.

Any help is appreciated.

Answer 1

what you need to do is:

1. open up the root config project in the browser (localhost:9000)
2. enable dev tools (localStorage.setItem('devtools', true))
3. reload
4. open the orange-looking button from the bottom-right of screen
5. get your micro front-end app name from its pkg.json file (@your_directory/micro_front_end_name)
6. create an override and add your micro front-end name there
7. for the override link, paste the URL that your micro frontend up and running (http://localhost:8080 for example)
8. boom, now you have it there!

btw, if you are still seeing some error regarding pkgs like react, react router, vue or any high level things like them, you need to create an override for them as well and the link for them will come from a cdn like cloudflare with desired version.