Не работает Firebase — .enablePersistence(). Как исправить?

Question

[Влад]

Не работает db.enablePersistence() - ошибка Uncaught TypeError: db.enablePersistence is not a function

Как я уже не пробовал, не понимаю в чём проблема

firebase.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import {
    enableIndexedDbPersistence,
    CACHE_SIZE_UNLIMITED,
    initializeFirestore,
} from 'firebase/firestore'

import 'firebase/compat/auth'
import 'firebase/compat/firestore'

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    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.MEASUREMENT_ID,
}

const firebaseApp = initializeApp(firebaseConfig)

const auth = getAuth(firebaseApp)

const db = initializeFirestore(firebaseApp, {
    cacheSizeBytes: CACHE_SIZE_UNLIMITED,
})


db.enablePersistence()
    .then(() => {
        console.log('Offline data enabled')
    })
    .catch((err) => {
        console.log('Error enabling offline data:', err)
    })

enableIndexedDbPersistence(db).catch((err) => {
    if (err.code === 'failed-precondition') {
        // Multiple tabs open, persistence can only be enabled
        // in one tab at a a time.
        // ...
    } else if (err.code === 'unimplemented') {
        // The current browser does not support all of the
        // features required to enable persistence
        // ...
    }
})
export { auth, db }

package.json

{
    "name": "---",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@emotion/react": "^11.10.5",
        "@emotion/styled": "^11.10.5",
        "@firebase/firestore": "^3.8.1",
        "@hookform/resolvers": "^2.9.10",
        "@mui/icons-material": "^5.10.16",
        "@mui/material": "^5.10.16",
        "@mui/utils": "^5.11.0",
        "@reduxjs/toolkit": "^1.9.1",
        "date-fns": "^2.29.3",
        "firebase": "^9.14.0",
        "nanoid": "^4.0.0",
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-firebase-hooks": "^5.1.1",
        "react-hook-form": "^7.40.0",
        "react-redux": "^8.0.5",
        "react-router-dom": "^6.4.4",
        "react-scripts": "5.0.1",
        "styled-components": "^5.3.6",
        "translate": "^1.4.1",
        "web-vitals": "^2.1.4",
        "workbox-cacheable-response": "^6.5.4",
        "workbox-core": "^6.5.4",
        "workbox-expiration": "^6.5.4",
        "workbox-precaching": "^6.5.4",
        "workbox-routing": "^6.5.4",
        "workbox-strategies": "^6.5.4",
        "workbox-window": "^6.5.4",
        "yup": "^0.32.11"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build ",
        "build-prod": "react-scripts build --production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "copy-webpack-plugin": "^11.0.0",
        "eslint": "^8.28.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jsx-a11y": "^6.6.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.31.11",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.8.0",
        "workbox-webpack-plugin": "^6.5.4"
    }
}

Comments

[WapSter]

А ты уверен, что в db вообще есть данный метод?

Answer 1

[kyzinatra]

А откуда вы взяли эту функцию. Я к примеру в доках ее не нашел
https://firebase.google.com/docs/firestore/manage-...

Если вы про этот метод


То он вызывается не у db. + так как вы используете модули в документации придевен следующий код

import { enableIndexedDbPersistence } from "firebase/firestore"; 

enableIndexedDbPersistence(db)
  .catch((err) => {
      if (err.code == 'failed-precondition') {
          // Multiple tabs open, persistence can only be enabled
          // in one tab at a a time.
          // ...
      } else if (err.code == 'unimplemented') {
          // The current browser does not support all of the
          // features required to enable persistence
          // ...
      }
  });
// Subsequent queries will use persistence, if it was enabled successfully