Why is my code not working in IE11? | TypeScript Community | Page 1

I have been tasked with making an MFE (micro frontend) React app run under IE11. It's essential that it runs under IE because MS Office <=2019 uses an IE webview for it's add-ins.

The app is configured to to be transpiled and polyfilled using webpack, babel, and core-js, and after fixing some errors due to the config for all that, I am now stuck on a new error when I run the app under IE. The error is:

TypeError: Class extends value [object Storage] is not a constructor or null

Looking at the stack trace I can find one case where a class extends an interface. This is just the class, not the whole GlobalStorage.ts file, but the rest of the file is just supporting functions.

export class GlobalStorage extends Storage {
  private constructor() {
    super();
  }

  public static getValue(key: string, storage: StorageType = "local"): string | null {
    if (isValidKey(key)) {
      const _storage = getStorage(storage);
      return _storage.getItem(key);
    } else {
      throw new Error(invalidKey);
    }
  }
}

Storage is defined in the typescript/lib/lib.dom.t.ts package, and it is defined both as an interface:

/** This Web Storage API interface provides access to a particular domain's session or local storage...*/
interface Storage {
...
}

and as a variable:

declare var Storage: {
    prototype: Storage;
    new(): Storage;
};

I suspect this may have something to do with the error and think this is causing an issue in the transpiled code. Here is an excerpt from the JavaScript bundle that contains the GlobalStorage class:

        var GlobalStorage = /** @class */
        function(_super) {
            (0,
            tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(GlobalStorage, _super);
            function GlobalStorage() {
                return _super.call(this) || this;
            }
            GlobalStorage.getValue = function(key, storage) {
                if (storage === void 0) {
                    storage = "local";
                }
                if (isValidKey(key)) {
                    var _storage = getStorage(storage);
                    return _storage.getItem(key);
                } else {
                    throw new Error(invalidKey);
                }
            }
            ;
            return GlobalStorage;
        }(Storage);

I think the error should have something to do with the transpiling because I don't see anything wrong in the GlobalStorage.ts file, and the code runs fine under Edge, just not under IE.

I would really appreciate some tips on how to debug and maybe even resolve this issue. Maybe suggestions on which areas of the webpack and babel config to look at.

#Why is my code not working in IE11?