Cannot read property 'call' of undefined from webpackAsyncContext (Webpack error)

Question

I am getting the following error for certain pages on my website. It is related to Webpack.

TypeError: Cannot read property 'call' of undefined

Why is this error happening?

The stack trace doesn't show any of my code. It is happening in Webpack code:

function webpackAsyncContext(e) {
    if (!n.o(r, e))
        return Promise.resolve().then((function() {
            var t = new Error("Cannot find module '" + e + "'");
            throw t.code = "MODULE_NOT_FOUND",
            t
        }
        ));
    var t = r[e]
      , o = t[0];
    return Promise.all(t.slice(1).map(n.e)).then((function() {
        return n(o) // <---- ERROR HAPPENING HERE
    }
    ))
}

UPDATE 1:

Error stacktrace is as follows:

main-client.js?v=HBU…YpSTrLMew46Jy0:1644 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main-client.js?v=HBU…HNYpSTrLMew46Jy0:20)
    at main-client.js?v=HBU…pSTrLMew46Jy0:38946
    at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
    at Object.onInvoke (main-client.js?v=HBU…YpSTrLMew46Jy0:7197)
    at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
    at Zone.run (main-client.js?v=HBU…pSTrLMew46Jy0:39537)
    at main-client.js?v=HBU…pSTrLMew46Jy0:40017
    at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
    at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
    at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
    at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39975)
    at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39952)
    at main-client.js?v=HBU…pSTrLMew46Jy0:40018
    at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
    at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
    at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
    at Zone.runTask (main-client.js?v=HBU…pSTrLMew46Jy0:39568)
    at drainMicroTaskQueue (main-client.js?v=HBU…pSTrLMew46Jy0:39754)
defaultErrorLogger  @   main-client.js?v=HBU…YpSTrLMew46Jy0:1644
ErrorHandler.handleError    @   main-client.js?v=HBU…YpSTrLMew46Jy0:1663
next    @   main-client.js?v=HBU…YpSTrLMew46Jy0:7472
i   @   main-client.js?v=HBU…YpSTrLMew46Jy0:6748
SafeSubscriber.__tryOrUnsub @   main-client.js?v=HBU…pSTrLMew46Jy0:27250
SafeSubscriber.next @   main-client.js?v=HBU…pSTrLMew46Jy0:27224
Subscriber._next    @   main-client.js?v=HBU…pSTrLMew46Jy0:27204
Subscriber.next @   main-client.js?v=HBU…pSTrLMew46Jy0:27196
Subject.next    @   main-client.js?v=HBU…pSTrLMew46Jy0:36275
EventEmitter.emit   @   main-client.js?v=HBU…YpSTrLMew46Jy0:6735
(anonymous) @   main-client.js?v=HBU…YpSTrLMew46Jy0:7207
ZoneDelegate.invoke @   main-client.js?v=HBU…pSTrLMew46Jy0:39643
Zone.run    @   main-client.js?v=HBU…pSTrLMew46Jy0:39537
NgZone.runOutsideAngular    @   main-client.js?v=HBU…YpSTrLMew46Jy0:7232
onHandleError   @   main-client.js?v=HBU…YpSTrLMew46Jy0:7206
ZoneDelegate.handleError    @   main-client.js?v=HBU…pSTrLMew46Jy0:39645
Zone.runGuarded @   main-client.js?v=HBU…pSTrLMew46Jy0:39550
_loop_1 @   main-client.js?v=HBU…pSTrLMew46Jy0:39890
Zone.__load_patch.n.microtaskDrainDone  @   main-client.js?v=HBU…pSTrLMew46Jy0:39896
drainMicroTaskQueue @   main-client.js?v=HBU…pSTrLMew46Jy0:39760
Promise.then (async)        
scheduleMicroTask   @   main-client.js?v=HBU…pSTrLMew46Jy0:39741
ZoneDelegate.scheduleTask   @   main-client.js?v=HBU…pSTrLMew46Jy0:39652
onScheduleTask  @   main-client.js?v=HBU…pSTrLMew46Jy0:39617
ZoneDelegate.scheduleTask   @   main-client.js?v=HBU…pSTrLMew46Jy0:39648
Zone.scheduleTask   @   main-client.js?v=HBU…pSTrLMew46Jy0:39586
Zone.scheduleMicroTask  @   main-client.js?v=HBU…pSTrLMew46Jy0:39592
scheduleResolveOrReject @   main-client.js?v=HBU…pSTrLMew46Jy0:40011
resolvePromise  @   main-client.js?v=HBU…pSTrLMew46Jy0:39971
(anonymous) @   main-client.js?v=HBU…pSTrLMew46Jy0:39928
webpackJsonpCallback    @   main-client.js?v=HBU…YHNYpSTrLMew46Jy0:5
(anonymous) @   0.js:formatted:1

UPDATE 2:

Error stacktrace after upgrading from Angular 7.2 to 9.1. Still the same issue.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
    at Module.280 (3.js:1)
    at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
    at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:57250
    at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
    at Object.onInvoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13800)
    at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
    at Zone.run (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58227)
    at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58839
    at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
    at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58793)
    at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58761)
    at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58840
    at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
    at Object.onInvokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13791)
    at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
    at Zone.runTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58267)
    at drainMicroTaskQueue (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58572)

UPDATE 3:

It has something to do with lazy loading. When I changed it to default loading (importing modules directly), it worked. (I have also updated hrefs and replaced them with routerLink.)

Right now, it has default loading.

Answer 1

In the terms and conditions you reference the AuthService and PageService.

I don't find where they are declared. This one i.e. could miss the AuthService: https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/shared/shared.module.ts

Or this one the PageService: https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/plugins/modules/page/page.module.ts

Alternatively you could use @Injectable with providedIn

Does this help?

Otherwise I find it a bit hard to debug. So I'd suggest using ng new to create a new project structure (you can add options to ignore the creation of the git repo) and merge your code into. This way you don't have to deal with adapting webpack and so on when doing upgrades.

Answer 2

I'm going to write an answer because it's too long as a comment. I suspect that this is because of the service worker.

I can reproduce your issue by navigating to the food link, or another link after having the page rendered once. I then have a blank page with the same error.

If before navigating to another page I unregister the service worker, the navigation works successfully.

To test and disable the service worker, open chrome's debugger, go to the Application tab, then click Service Workers on the left, and then click unregister on the right.

You'll need to activate source maps to identify the exact error, but I tracked it down to the line 279 (once formatted) of the file 3.js.

ForumSubforumFormComponent
    }()
      , F = o(294) // <=== error here
      , C = function() {
        function Topic(t) {
            this.contentItem = t,

When service worker is registered, F is a function

console.log(F)
ƒ hooks(){return a.apply(null,arguments)}

When the service worker is registered, o(294) throws an error, probably because it's not included in webpack.

When looking at the requested files in the network tab, it looks like there are 2 different version of the main-client.js file that are requested (depending on wether the page has been requested by the browser or the service worker).

This might be the cause of the issue.

Also service workers can only be registered using HTTPS, which would explain why the problem did not occur before using http. Testing http on your website is not possible anymore, since there is a 307 redirection to https.

Note As indicated in one of the comments, the navigation is a bit weird on your website.. it refreshes the whole page everytime you navigate. Also, angular universal does not seem to always render