How to fix ERROR: Unhandled Promise rejection: this._next is not a function ; Zone: <root> ; Task: ServiceWorkerContainer.addEventListener:message

Question

This error happens when I am receiving firebase push notifications on the foreground. Note that the push notification works fine on the background (i.e when the browser is minimized or closed). I have installed the latest version of @angular/[email protected] and [email protected]. I am not sure if this is an issue with firebase or @angular/fire or do I need to add some codes to plyfills.ts

The method that receives the notification

receiveMessage() {
    this.ngFireMessaging.messages.subscribe(
      (message: any) => {
        console.log(message);
        this.currentMessage$.next(message);
      });
  }

Angular CLI version

Angular CLI: 9.1.0
Node: 12.16.0
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/fire                     6.0.0
@angular/material                 9.2.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

The Error from console

Unhandled Promise rejection: this._next is not a function ; Zone: <root> ; Task: ServiceWorkerContainer.addEventListener:message ; Value: TypeError: this._next is not a function
    at e.next [as onMessageCallback] (main.2ac4bad4d06fe2a505d3.js:1)
    at e.<anonymous> (firebase-messaging.c990cfcb6700c33953d8.js:1)
    at main.2ac4bad4d06fe2a505d3.js:1
    at Object.next (main.2ac4bad4d06fe2a505d3.js:1)
    at main.2ac4bad4d06fe2a505d3.js:1
    at new e (polyfills.4543e63cd9f44e11348e.js:1)
    at l (main.2ac4bad4d06fe2a505d3.js:1)
    at e.messageEventListener (firebase-messaging.c990cfcb6700c33953d8.js:1)
    at ServiceWorkerContainer.<anonymous> (firebase-messaging.c990cfcb6700c33953d8.js:1)
    at e.invokeTask (polyfills.4543e63cd9f44e11348e.js:1) TypeError: this._next is not a function
    at e.next [as onMessageCallback] (https://internetbanking-a.firebaseapp.com/main.2ac4bad4d06fe2a505d3.js:1:193372)
    at e.<anonymous> (https://internetbanking-a.firebaseapp.com/firebase-messaging.c990cfcb6700c33953d8.js:1:26524)
    at https://internetbanking-a.firebaseapp.com/main.2ac4bad4d06fe2a505d3.js:1:427790
    at Object.next (https://internetbanking-a.firebaseapp.com/main.2ac4bad4d06fe2a505d3.js:1:427895)
    at https://internetbanking-a.firebaseapp.com/main.2ac4bad4d06fe2a505d3.js:1:426832
    at new e (https://internetbanking-a.firebaseapp.com/polyfills.4543e63cd9f44e11348e.js:1:14960)
    at l (https://internetbanking-a.firebaseapp.com/main.2ac4bad4d06fe2a505d3.js:1:426577)
    at e.messageEventListener (https://internetbanking-a.firebaseapp.com/firebase-messaging.c990cfcb6700c33953d8.js:1:26245)
    at ServiceWorkerContainer.<anonymous> (https://internetbanking-a.firebaseapp.com/firebase-messaging.c990cfcb6700c33953d8.js:1:23473)
    at e.invokeTask (https://internetbanking-a.firebaseapp.com/polyfills.4543e63cd9f44e11348e.js:1:8398)
Zone.__load_patch.n.onUnhandledError @ polyfills.4543e63cd9f44e11348e.js:1
(anonymous) @ polyfills.4543e63cd9f44e11348e.js:1
e @ polyfills.4543e63cd9f44e11348e.js:1
Zone.__load_patch.n.microtaskDrainDone @ polyfills.4543e63cd9f44e11348e.js:1
b @ polyfills.4543e63cd9f44e11348e.js:1
t.invokeTask @ polyfills.4543e63cd9f44e11348e.js:1
p @ polyfills.4543e63cd9f44e11348e.js:1
h @ polyfills.4543e63cd9f44e11348e.js:1

I have gone through the firebase and @angular/fire documentation but didn't get any help.

I hope this is enough info fo anyone who can help.

Answer 1

I spent a lot of time on this! Finally, I found the solution is detailed here.

In summary, you must have firebase library version greater than 7.16 inside your package.json and it should match the version in firebase-messaging-sw.js