16

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");

}
BBaysinger
  • 6,614
  • 13
  • 63
  • 132
  • Out of curiosity, which loader are you using? – Randy Casburn Apr 19 '18 at 02:00
  • 1
    I'm not sure. How do I find that out? – BBaysinger Apr 19 '18 at 02:01
  • I mean, I'm not sure what you mean by 'loader'. – BBaysinger Apr 23 '18 at 17:43
  • 1
    Sorry, assumed if you're asking a WebPack question you'd have known: Anyway, here is what loaders are: https://github.com/webpack/docs/wiki/using-loaders and here is the doc page that lists the available loaders: https://webpack.js.org/loaders/ – Randy Casburn Apr 24 '18 at 00:22
  • 1
    This is more than likely related to the webpack-dev-server: please look at this issue: https://github.com/webpack/webpack-dev-server/issues/1282 – Randy Casburn Apr 24 '18 at 00:33
  • It looks like they resolved the issue in webpack-dev-server@2.11.1, but I'm not sure what version of webpack dev server Angular CLI is using. – BBaysinger Apr 24 '18 at 01:58
  • I found it via: https://stackoverflow.com/a/47686431/1253298. In package.json, it's ~2.11.0, and in package.lock.json, it's 2.11.2. Ugh. I'm going to have to come back to this tomorrow. – BBaysinger Apr 24 '18 at 02:04

4 Answers4

13

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.

BBaysinger
  • 6,614
  • 13
  • 63
  • 132
7

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!

Pearman
  • 1,068
  • 5
  • 14
  • Thanks. Also, someone on a similar question suggested trying loading the polyfills in the index before Angular runs. I want to try that too, but I'll have to figure out how to compile them all into a `.js` file. – BBaysinger Apr 23 '18 at 18:51
  • Why? With the above import you shouldn't need to do any manual compilation -- the Angular CLI will do it all automatically. – Pearman Apr 23 '18 at 18:54
  • 1
    I guess the thought was that it's possible the polyfills aren't getting loaded until after the `.call()`, but if you say that's not possible, I'll take your word for it. – BBaysinger Apr 23 '18 at 19:14
  • If you are using the CLI generated polyfills.ts file -- it should take care of the lifecycle for you. That being said, stranger things have happened. – Pearman Apr 23 '18 at 19:18
  • So far so good on your fix. The only thing is, I need to restart the server a bunch of times to confirm this. – BBaysinger Apr 23 '18 at 19:37
  • Question -- have you completely closed IE (possibly requiring Task Manager) and reopened it since making the changes? It has some unique problems with caching that occasionally require a full reset. – Pearman Apr 23 '18 at 20:20
0

If this code works in other browsers, you might have run into some IE-specific JS implementation issue. In your project, open the file src/polyfills.ts. It starts with a bunch of commented out lines with IE polyfills. Uncomment all of them and rebuild the app. If this helps, try to find out which specific polyfill solved your issue and comment out the rest.

Yakov Fain
  • 11,972
  • 5
  • 33
  • 38
-1

WORKAROUND: Since the problem is to do with the Webpack dev server only, we opted to just write the files with ng build --watch, and serve them with lite-server for testing IE <= 11.

BBaysinger
  • 6,614
  • 13
  • 63
  • 132