Angular 2+: IE 11 Unable to get property 'call' of undefined or null reference

Question

I'm having an issue with Internet Explorer choking on something with Webpack. I'm using Angular-CLI 1.7.4, and Angular 5.2.10, the current versions. I'm getting this error:

SCRIPT:5007 Unable to get property 'call' of undefined or null reference. Inline bundle.js (55,12)

This is different than this issue, in that it is on a different line in the bundle. The line looks like this:

/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

I tried modding the webpack code in the node_modules to console.log the moduleId, but it doesn't log for some reason.

I found this thread, where a lot of people are dealing with this issue. I'm not able to see what is relevant to my issue.

I do not have any circular dependency warnings from the CLI.

I've reverted my code to several different previous versions, reinstalled the node modules, and I still get the same error. That's really strange.

UPDATE: Here are the polyfills I have in:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

I also found this issue, which shows that a number of people are having this problem, and the solutions offered are not working.

UPDATE: I've found the reason the console.log wasn't being called from Webpack. It's that it wasn't necessarily in Webpack. I searched my node_modules for modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), and found there were 87 occurrences. I assumed that because it said 'webpack' that it was part of webpack, so that was the first place I looked, which is a place where it does occur, so I stopped there thinking I'd found it.

Also, I'm having this problem again, and restarted my Angular-CLI server a bunch of times, but I'm not able to get a compile that is working.

This is becoming critical, so I'm going to raise a bounty on this question.

UPDATE: It looks like IE is choking on the invocation (Function.prototype.call) of the method that adds the polyfills. I captured this from inline.bundle.js. It's one of the first things that happens:

function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__("./src/polyfills.ts");

}

Solution 1

This error only happens when running ng serve, and will not occur in a production build, so the issue is non-critical, and has a workaround, as follows:

Workaround: When this occurs, close your browser, restart Angular-CLI dev server, and reopen the browser to your app. (You don't need to clear cache, or anything else.)

This sometimes occurs in one testing environment and not others.

Per this thread, github.com/jakehockey10 says:

I'm having this issue only after a live-reload occurs with the Developer Tools open. No issue with Chrome and Firefox, but if I have the Developer Tools open in IE11 and save a change to my typescript, nearly 100% of the time, I get these errors upon reload.

Also, Angular 6 is now in full release, and uses a new major version of Webpack. I haven't tried it yet, but would be good to know if someone has tried resolving the issue by upgrading.

Solution 2

Even the with above polyfills included, you may still be using a feature that is not supported in IE. Instead you might try this:

 import 'core-js/shim';

This will include ALL of the polyfills (which doesn't really add that much to your bundle anyway). At the very least, this will help to eliminate that polyfills are the problem.

The source for reference: https://github.com/zloirock/core-js/blob/master/shim.js

Good luck!