从 firebase 版本 8 升级到版本 9 compat - Service firestore 不可用

Question

在我的 React 应用程序中，将 firebase 从版本 8 升级到版本 9（兼容）后，出现此错误：

provider.ts:130 Uncaught Error: Service firestore is not available
    at Provider.getImmediate (provider.ts:130:1)
    at La (index.esm2017.js:17277:1)
    at ./src/firebase.js (firebase.js:60:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/views-auth/LoginPage.js (LandingPage.js:208:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/layouts/Auth.js (Admin.js:276:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/index.js (firebase.js:186:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at 1 (StudentsPage.js:148:1)
    at __webpack_require__ (bootstrap:784:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:109

下面是 firebase 导入和 firebase 应用程序初始化。

进口：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/analytics";
import "firebase/compat/functions";
import "firebase/compat/storage";

Firebase 应用初始化：

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

const app = firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();
const functions = firebase.functions();
const analytics = firebase.analytics();
const auth = firebase.auth();
const storage = firebase.storage();

这是我的 package.json

{
  "name": "material-dashboard-pro-react",
  "version": "1.9.0",
  "private": true,
  "dependencies": {
    "@aws-sdk/client-cognito-identity": "^3.154.0",
    "@aws-sdk/client-polly": "^3.154.0",
    "@aws-sdk/credential-provider-cognito-identity": "^3.154.0",
    "@date-io/date-fns": "1.x",
    "@material-ui/core": "^4.11.4",
    "@material-ui/data-grid": "^4.0.0-alpha.31",
    "@material-ui/icons": "4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.3.10",
    "@stripe/firestore-stripe-payments": "^0.0.6",
    "algoliasearch": "^4.14.2",
    "chartist": "0.10.1",
    "classnames": "2.2.6",
    "compressorjs": "^1.1.1",
    "date-fns": "^2.19.0",
    "detect-browser": "^5.2.0",
    "firebase": "9.12.1",
    "google-classroom-share": "^0.5.6",
    "google-translate": "^3.0.0",
    "history": "4.10.1",
    "http2": "^3.3.7",
    "instantsearch.css": "^7.4.5",
    "lodash": "^4.17.21",
    "material-ui-dropzone": "^3.5.0",
    "moment": "^2.29.1",
    "perfect-scrollbar": "1.5.0",
    "react": "16.13.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap-sweetalert": "5.1.9",
    "react-chartist": "0.14.3",
    "react-code-input": "^3.10.0",
    "react-confetti": "^6.0.1",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-gapi": "^1.0.2",
    "react-google-button": "^0.7.2",
    "react-google-charts": "^4.0.0",
    "react-google-login": "^5.2.2",
    "react-iframe": "^1.8.0",
    "react-instantsearch-hooks-web": "^6.33.0",
    "react-loading": "^2.0.3",
    "react-papaparse": "^3.16.1",
    "react-player": "^2.9.0",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.2",
    "react-redux-firebase": "^3.10.0",
    "react-rewards": "^1.1.2",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "react-slick": "^0.29.0",
    "react-sortable-hoc": "^2.0.0",
    "react-speech-recognition": "^3.7.0",
    "react-tagsinput": "3.19.0",
    "react-use-intercom": "^1.5.0",
    "react-voice-recorder": "^2.0.7",
    "redux": "^4.0.5",
    "redux-firestore": "^0.15.0",
    "redux-thunk": "^2.3.0",
    "resize-observer-polyfill": "^1.5.1",
    "sass": "^1.55.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.3",
    "unsplash-js": "^7.0.4",
    "uuid": "^8.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.css",
    "minify-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.min.css --output-style compressed",
    "map-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.css --source-map true",
    "analyze": "source-map-explorer 'build/static/js/*.js'"
  },
  "optionalDependencies": {
    "@types/googlemaps": "3.39.6",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.12.2",
    "typescript": "3.9.3"
  },
  "devDependencies": {
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.3",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "prettier": "2.0.5"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
  }
}

firebase版本从8.2.1升级到9.12.1。 我寻找类似的问题，但解决方案无效。 我尝试更改导入 URL 并重新安装 firebase 的 v9。

Answer 1

将此作为社区 wiki 发布以帮助将遇到此问题的其他社区 wiki。

Service firestore is not available错误将发生在较低版本的 Firebase 上，因为它没有更新的兼容库。 Package 管理员有时会在更新库时遇到一些问题，这会使库停留在旧版本。 通过删除或删除现有已安装的库并重新安装最新版本应该是解决方案。 在这种情况下，使用Yarn ，将通过执行以下命令来解决：

Firebase 库删除：

yarn remove firebase

Firebase 重新安装：

yarn add firebase