更新项目后出现Unable to resolve module firebase/auth错误求助

更新项目内容后，出现错误提示："Unable to resolve module firebase/auth"，错误详情显示“firebase/auth could not be found within the project or in these directories...”。已尝试修改版本号、单独安装@firebase/auth，均未解决问题。

当前项目相关依赖片段 #

"@firebase/auth": "^0.20.11",
"@firebase/firestore": "^3.4.12",
"firebase": "9.9.0",

完整package.json内容 #

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@callstack/react-theme-provider": "^3.0.8",
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^0.17.3",
    "@react-native-aria/utils": "^0.2.7",
    "@react-native-community/datetimepicker": "6.5.2",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-toolkit/triangle": "^0.0.1",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "6.0.13",
    "@react-navigation/native-stack": "^6.9.0",
    "@react-navigation/stack": "^6.3.4",
    "@stream-io/flat-list-mvcp": "^0.10.1",
    "base-64": "^1.0.0",
    "eas-cli": "^2.7.1",
    "expo": "^47.0.6",
    "expo-ads-admob": "~13.0.0",
    "expo-asset": "~8.6.2",
    "expo-auth-session": "~3.7.2",
    "expo-av": "~13.0.1",
    "expo-camera": "~13.0.0",
    "expo-constants": "~14.0.2",
    "expo-dev-client": "~2.0.0",
    "expo-facebook": "~12.2.0",
    "expo-image-picker": "~14.0.1",
    "expo-location": "~15.0.1",
    "expo-media-library": "~15.0.0",
    "expo-permissions": "~14.0.0",
    "expo-random": "~13.0.0",
    "firebase": "^9.14.0",
    "firesql": "~2.0.2",
    "idb": "^7.0.2",
    "lodash": "^4.17.21",
    "material-ui": "^0.15.0",
    "mathjs": "^11.4.0",
    "native-base": "^3.4.22",
    "pkg": "^5.8.0",
    "prop-types": "^15.7.2",
    "proptypes": "^1.1.0",
    "random-uuid-v4": "^0.0.9",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-error-boundary": "^3.1.3",
    "react-native": "0.70.5",
    "react-native-action-button": "^2.8.5",
    "react-native-audio": "^4.3.0",
    "react-native-aws3": "^0.0.9",
    "react-native-bidirectional-infinite-scroll": "^0.3.3",
    "react-native-camera": "^4.2.1",
    "react-native-easy-toast": "^2.0.0",
    "react-native-elements": "^4.0.0-rc.2",
    "react-native-fbsdk-next": "^11.1.0",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-gifted-chat": "^1.0.4",
    "react-native-google-mobile-ads": "^8.1.0",
    "react-native-image-crop-picker": "^0.38.1",
    "react-native-image-picker": "^4.0.6",
    "react-native-keyboard-aware-scroll-view": "^0.9.4",
    "react-native-mapbox-gl": "^5.2.1-deprecated",
    "react-native-maps": "1.3.2",
    "react-native-menu-list": "^1.0.1",
    "react-native-navbar": "^2.1.0",
    "react-native-open-maps": "~0.4.0",
    "react-native-paper": "^4.12.5",
    "react-native-reanimated": "~2.12.0",
    "react-native-router-flux": "^4.3.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.17.0",
    "react-native-snap-carousel": "^1.3.1",
    "react-native-sound": "^0.11.0",
    "react-native-swiper": "^1.6.0",
    "react-native-switch-selector": "^2.1.4",
    "react-native-video": "^5.2.1",
    "react-native-web": "~0.18.9",
    "react-navigation": "^4.4.4",
    "react-player": "^2.11.0",
    "react-scripts": "^5.0.1",
    "smartsocket": "^1.1.22",
    "styled-components": "^5.3.0",
    "use-debounce": "^8.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/node": "^18.11.9",
    "babel-preset-expo": "~9.2.2"
  },
  "private": true
}

错误截图 #

解决步骤 #

1. 统一Firebase版本，移除独立子包 #

Firebase v9+核心包已包含auth、firestore等模块，无需单独安装@firebase/auth和@firebase/firestore，版本不匹配会导致模块查找失败：

npm uninstall @firebase/auth @firebase/firestore
npm install firebase@9.14.0

2. 清理缓存并重装依赖 #

rm -rf node_modules
rm package-lock.json
npm install
expo start --clear

3. 检查导入语法是否符合v9+规范 #

Firebase v9采用模块化导入，旧的命名空间导入会出错：

• 错误示例：

import firebase from 'firebase/app';
import 'firebase/auth';

• 正确示例：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

// 初始化App
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

4. 配置Metro支持Firebase模块 #

如果是Expo项目，修改metro.config.js（没有则新建）：

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);

// 增加对cjs格式的支持
config.resolver.sourceExts.push('cjs');

module.exports = config;

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