修复Uncaught TypeError: firebase.auth is not a function报错

这个报错是Firebase v9+版本兼容层写法的典型问题：你只导入了compat模式的核心app包，没有导入auth服务对应的compat包，firebase.auth()方法根本没有被挂载到firebase实例上，自然会报“不是函数”的错误。
你代码里关键的import 'firebase/compat/auth';行被注释掉了，这是直接诱因。

方案1：保留compat命名空间写法（改动最小） #

如果你想继续用旧版的链式/命名空间写法，只需要打开auth兼容包的导入，删掉所有没用的注释掉的冗余导入即可，修正后可运行代码：

import firebase from 'firebase/compat/app';
// compat模式下每个服务必须单独导入，否则对应方法不存在
import 'firebase/compat/auth';
// 后续使用firestore再放开下面这行
// import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "AIzaSyBYZCeQfHboP-zEDyNGyMODEfx33RiQmTg",
    authDomain: "graphqlmernstack.firebaseapp.com",
    projectId: "graphqlmernstack",
    storageBucket: "graphqlmernstack.appspot.com",
    appId: "1:165123567996:web:6c808a04288956d188f4f9",
    measurementId: "G-6G4BVK9FQZ"
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

注意事项：

• 不要混用firebase/compat/*兼容包和firebase/*新版模块化包，会出现实例不匹配的隐性问题
• compat模式下auth、firestore、storage等服务都需要单独导入对应的compat文件，不会随app包自动挂载

方案2：使用v9+官方推荐模块化写法（打包体积更小） #

如果不需要兼容旧代码，更推荐直接用新版模块化API，tree-shaking友好，打包体积更小，写法如下：

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
// 后续用firestore就加下面的导入
// import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: "AIzaSyBYZCeQfHboP-zEDyNGyMODEfx33RiQmTg",
    authDomain: "graphqlmernstack.firebaseapp.com",
    projectId: "graphqlmernstack",
    storageBucket: "graphqlmernstack.appspot.com",
    appId: "1:165123567996:web:6c808a04288956d188f4f9",
    measurementId: "G-6G4BVK9FQZ"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const googleAuthProvider = new GoogleAuthProvider();

注意事项：

• 模块化写法没有全局firebase对象，所有方法都要从对应服务包单独导入
• 调用服务方法（比如登录、获取数据）时，需要把对应服务实例作为参数传入，不能再用旧版的实例链式调用

内容的提问来源于stack exchange，提问作者Gaia