IE 11 issue with rendering single-spa app

[patrickcze]

Just trying to setup a new single-spa application and get it working with ie11.

I have resolved the issues with the required polyfills for systemJS for fetch and Promise but now im running into this issue. The application is loading in other browsers.

Not sure what the issue might be, for this test Im using the default created apps from create-single-spa.

HTML1300: Navigation occurred.
10.0.0.82:9000
Unhandled rejection Error: Error loading http://localhost:9000/root-config.js
    (No stack trace)
From previous event:
   at g.instantiate (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:5831)
   at e.instantiate (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:7398)
   at e.instantiate (https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.min.js:1:835)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:2511)
From previous event:
   at t (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:2471)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:2337)
From previous event:
   at g.import (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:2238)
   at e.import (https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.2.5/system.min.js:4:6477)
   at Global code (http://10.0.0.82:9000/:38:5)

[joeldenning]

From the stacktrace, my guess is that this error is specific to root-config.js, not to single-spa or systemjs.

If you go to http://localhost:9000/root-config.js in the browser directly in a new tab, does it load up the javascript file?

The stacktrace isn't very specific so you might have to put breakpoints into the IE11 debugger in order to see what the error is.

[patrickcze]

Im not sure that it is an issue with the root-config.js, i am able to view it when navigating directly to the url. I also get the same error when running the react-microfrontend example code. https://github.com/react-microfrontends/root-config

Using breakpoints it seems to be failing somewhere in SystemJS when running System.import("@react-mf/root-config"); in the index.ejs

My root-config.js file looks like this.

import { registerApplication, start } from "single-spa";
import * as isActive from "./activity-functions";

registerApplication(
  "@xerris/app",
  () => System.import("@xerris/app"),
  isActive.navbar
);

start();

Thanks for taking the time to look into this.

[patrickcze]

So I made some progress on this and realized part of my issue was from running in a windows VM. I Setup the same environment in windows and am having the following error.

HTML1300: Navigation occurred.
localhost:9000
Current window: localhost
SCRIPT1002: Syntax error
root-config.js (9942,90)
Warning: a promise was rejected with a non-error: [object Undefined]
    (No stack trace)
From previous event:
   at g.instantiate (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:5831)
   at e.instantiate (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:7398)
   at e.instantiate (https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.min.js:1:835)
   at Anonymous function (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2511)
From previous event:
   at t (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2471)
   at Anonymous function (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2337)
From previous event:
   at g.import (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2238)
   at e.import (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:6477)
   at Global code (http://localhost:9000/:35:5)
Unhandled rejection TypeError: Unable to get property '0' of undefined or null reference
   at Anonymous function (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:3072)
From previous event:
   at t (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:3012)
   at Anonymous function (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2337)
From previous event:
   at g.import (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:2238)
   at e.import (https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js:4:6477)
   at Global code (http://localhost:9000/:35:5)

Using break points it fails on the following line:

Object(single_spa__WEBPACK_IMPORTED_MODULE_0__["registerApplication"])("@xerris/app", () => System.import("@xerris/app"), _activity_functions__WEBPACK_IMPORTED_MODULE_1__["navbar"]);

[patrickcze]

What im really looking for is an example configuration that works for IE11, is there an easy way to make the react microfrontends project work in IE11? The current version doesn't seem to support IE11 due to missing polyfills.

[patrickcze]

After a bunch of trying different solutions it came down to some missing polyfills inside of the index.ejs. If anyone has similar issues try adding the following to your index.ejs or index.html:

  <script>
    if (typeof Promise === 'undefined')
      document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.2/bluebird.core.js"><\/script>');
  </script>
  <script>
  if (typeof fetch === 'undefined')
    document.write('<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.min.js"><\/script>');
  </script>
  <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.isInteger%2Ces6%2Ces7"></script> 

[joeldenning]

👍 glad you figured it out. Promises are used by single-spa and systemjs, and fetch is used by systemjs