Angular 13: Namespace '"/node_modules/firebase/compat/index"' has no exported member 'User'. ts(2694)

Question

1st error:

Namespace '"D:/desktop/Programming/oauthAngular/node_modules/firebase/compat/index"' has no exported member 'User'.

2nd error:

Type 'import("D:/desktop/Programming/oauthAngular/node_modules/rxjs/dist/types/internal/Observable").Observable<firebase.default.auth.UserCredential>' is not assignable to type 'import("D:/desktop/Programming/oauthAngular/node_modules/rxjs/dist/types/internal/Observable").Observable<import("D:/desktop/Programming/oauthAngular/node_modules/@firebase/auth/dist/auth-public").UserCredential>'.
  Property 'providerId' is missing in type 'firebase.default.auth.UserCredential' but required in type 'import("D:/desktop/Programming/oauthAngular/node_modules/@firebase/auth/dist/auth-public").UserCredential'.

Here is what is inside my auth.service.ts

import { AngularFireAuth } from '@angular/fire/compat/auth';
import * as auth from 'firebase/auth';
import { BehaviorSubject, Observable, from } from 'rxjs';
import { Injectable } from '@angular/core';
import { switchMap } from 'rxjs/operators';
import * as firebase from 'firebase/app';


@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private user: BehaviorSubject<
    Observable<firebase.User>
  > = new BehaviorSubject<Observable<firebase.User>>(null);
  user$ = this.user
    .asObservable()
    .pipe(switchMap((user: Observable<firebase.User>) => user));

  constructor(private afAuth: AngularFireAuth) {
    this.user.next(this.afAuth.authState);
  }

  loginViaGoogle(): Observable<auth.UserCredential> {
    return from(this.afAuth.signInWithPopup(new auth.GoogleAuthProvider()));
  }

  logout(): Observable<void> {
    return from(this.afAuth.signOut());
  }
}

Can you help me with the errors in my Angular code. I was trying to connect it to Firebase for me to be able to use OAuth? Thank you.

Answer 1

This error could be from mixing two similar libraries.

Try removing import * as auth from 'firebase/auth'; instead import UserCredential from the correct library.

import { UserCredential } from "@angular/fire/auth";
//import { UserCredential } from "firebase/auth";