搭建Facebook克隆项目配置Google认证时出现firebase模块无法解析错误

这个报错有两个核心原因：要么未安装firebase依赖，要么安装了v9及以上版本的firebase但使用了旧版本的导入语法，同时现有代码还漏了核心API的导入，按以下步骤操作即可解决：

步骤1：安装firebase依赖 #

在项目根目录终端执行以下命令：
npm install firebase
如果使用yarn包管理工具，执行：
yarn add firebase

步骤2：修正firebase.js代码 #

目前firebase v9+默认使用模块化导入语法，你现有代码的写法是v8及更早版本的写法，有两种修改方案可选：

方案A：使用兼容模式（改造成本最低，原有调用逻辑不需要调整） #

直接替换整个firebase.js的内容为以下代码：

// 兼容模式导入，保留v8的链式调用写法
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

const firebaseConfig = {
  apiKey: "AIzaSyAPjfkQ6hDKJ_siNyv0buGCKEDpT95f3h0",
  authDomain: "facebook-clone-43aa4.firebaseapp.com",
  projectId: "facebook-clone-43aa4",
  storageBucket: "facebook-clone-43aa4.appspot.com",
  messagingSenderId: "966828984493",
  appId: "1:966828984493:web:9a546c8c5f793afc6b9e24",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export default db;
export { auth, provider };

方案B：使用新版模块化语法（官方推荐，打包体积更小） #

替换为以下代码：

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaSyAPjfkQ6hDKJ_siNyv0buGCKEDpT95f3h0",
  authDomain: "facebook-clone-43aa4.firebaseapp.com",
  projectId: "facebook-clone-43aa4",
  storageBucket: "facebook-clone-43aa4.appspot.com",
  messagingSenderId: "966828984493",
  appId: "1:966828984493:web:9a546c8c5f793afc6b9e24",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const provider = new GoogleAuthProvider();

export default db;
export { auth, provider };

如果选择方案B，后续项目中调用firebase相关API的写法也要对应改为模块化写法，不能继续使用v8的链式调用语法

步骤3：重启开发服务 #

修改完成后停掉当前运行的开发服务，重新执行npm start或者yarn start启动即可。

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