Module not found: Error: Package path ./compat is not exported from package

[falk-stefan]

Version info

Angular: 12

Firebase: 9.01

AngularFire: 7.0.3

The issue

I am trying to use Firebase in my Angular app. The problem appears to emerge whenever I am injecting my AuthService which is dependent on some angularfire components.

So, just the constructor which receives an AuthService instance makes the difference here between crashing and not crashing:

Crashing

import {Component, OnInit} from '@angular/core';
import {AuthService} from "../../../services/auth.service";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  constructor(public authService: AuthService) {  }
}

Not crashing

import {Component, OnInit} from '@angular/core';
import {AuthService} from "../../../services/auth.service";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  // constructor(public authService: AuthService) {  }
}

AuthService

The AuthService is just a simple implementation for authentication where I am using things like AngularFireAuth. The code below (collapsed) is straight forward and is probably not the root of the problem but just for completeness here it is:

Click me

import {Injectable} from "@angular/core";
import {Observable, of} from "rxjs";
import {Router} from "@angular/router";
import firebase from "firebase/compat";
import {switchMap} from "rxjs/operators";
import {AngularFireAuth} from "@angular/fire/compat/auth";
import {AngularFirestore, AngularFirestoreDocument} from "@angular/fire/compat/firestore";
import User = firebase.User;
import auth = firebase.auth;


@Injectable({providedIn: 'root'})
export class AuthService {
  public user$: Observable<User | null>;

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router
  ) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        }
        return of(null);
      })
    ) as Observable<User>;
  }

  async googleSignIn() {
    const provider = new auth.GoogleAuthProvider();
    const credentials = await this.afAuth.signInWithPopup(provider);
    return this.updateUserData(credentials.user);
  }

  async signOut() {
    await this.afAuth.signOut();
    return this.router.navigate(['/'])
  }

  // ...
}

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

I think I maneged to reproduce this. The error message in the StackBlitz example is different but leads me to the same conclusion:

https://stackblitz.com/edit/angular-fire-start-np32w7?file=app%2Fapp.component.ts

@firebase/auth:
Auth (9.0.0): INTERNAL ASSERTION FAILED: Expected a class definition

Debug output

In my project I am getting the following error message during build:

./src/app/services/auth.service.ts:3:0-39 - Error: Module not found: Error: Package path ./compat is not exported from package /home/sfalk/workspacesweb-mobile/node_modules/firebase (see exports field in /home/sfalk/workspaces/web-mobile/node_modules/firebase/package.json)

As a result, the app simply does not work at all:

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[falk-stefan]

It turns out it was just a wrong import statement. I had to change

import firebase from "firebase/compat";

to

import firebase from "firebase/compat/app";
//                                    ^^^

See also this answer.