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

I had some headache with this problem today, and I was able to solve it just by adding the .default on the configuration of SystemJS.import(), I followed this repo, take a look at line 21, where he puts the .default in the end, this was enough to make my applications work just fine.

Hope it helps!