I'm working on a project using React and Firebase. While doing that, I got this error: TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_4__.default.auth is not a function React points this line for the error: const auth = firebase.auth();

My App.js file (I can't show all of it but the important part):

import './App.css';

import React, { useRef, useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { useCollectionData } from 'react-firebase-hooks/firestore';

import firebase from 'firebase/compat/app';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/analytics';

firebase.initializeApp({
  // secret
})

const auth = firebase.auth();
const firestore = firebase.firestore();
const analytics = firebase.analytics();

CodePudding user response：

Your code after your imports is using the v8/compat style of calling Firebase. If you want to continue using that, you should import all Firebase SDKs you use from the compat path as shown in the documentation on using the compat libraries.

So:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
import 'firebase/compat/analytics';

firebase.initializeApp({
  // secret
})

const auth = firebase.auth();
const firestore = firebase.firestore();
const analytics = firebase.analytics();