search

firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.76k stars 874 forks source link

TypeError after adding chatGPT code: firebase.firestore is not a function. (In 'firebase.firestore()', 'firebase.firestore' is undefined)] #6966

Closed Shange-Fagan closed 1 year ago

Shange-Fagan commented 1 year ago

Describe your environment

After adding simple replay button code to my code I get the error TypeError: firebase.firestore is not a function. (In 'firebase.firestore()', 'firebase.firestore' is undefined)]

Steps to reproduce:

install firebase install firebase/firestore add this code to your main.js file:

// TODO(you): code here to reproduce the problem
useEffect(() => {
    const db = firebase.firestore();
    const profileRef = db.collection('profiles').doc('profileId');
    profileRef.get().then((snapshot) => {
      setProfile(snapshot.data());
    });
  }, []);

  const handleReplayProfile = () => {
    const db = firebase.firestore();
    const profileRef = db.collection('profiles').doc('profileId');
    profileRef.update({
      viewed: false,
    });
  };

I have followed all of ChatGPT's instructions but still getting an error message: Chat GPT's instructions: Double-check that you have correctly imported the Firebase Firestore library in your code. The import statement should be similar to import firebase from 'firebase/app'; import 'firebase/firestore'; Ensure that you have initialized the Firebase app before trying to access the Firestore service. Make sure you have the latest version of firebase and firebase-firestore, if you are running an older version of package you might face this kind of error. Double-check that you have correctly set up Firebase and Firestore in the Firebase console and that the configuration information you are using in your code is correct. If you are using a version of Firebase that is not compatible with the latest version of Firebase Firestore, you might face this kind of error. In this case, you should update to the latest version of Firebase. If none of the above steps work, you may need to restart the development server and clear the cache. It is important to double-check your code and the Firebase configuration, and make sure that the Firebase Firestore library is properly imported and initialized before trying to use it.

Relevant Code:

main.js:

// TODO(you): code here to reproduce the problem
useEffect(() => {
    const db = firebase.firestore();
    const profileRef = db.collection('profiles').doc('profileId');
    profileRef.get().then((snapshot) => {
      setProfile(snapshot.data());
    });
  }, []);

  const handleReplayProfile = () => {
    const db = firebase.firestore();
    const profileRef = db.collection('profiles').doc('profileId');
    profileRef.update({
      viewed: false,
    });
  };

firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

// Initialize Firebase
const app = initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
});
// const analytics = getAnalytics(app);
const auth = getAuth();
const db = getFirestore();

export { auth, db };

package.json

{
  "name": "twinder-3",
  "version": "1.0.0",
  "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",
    "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
    "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
  },
  "dependencies": {
    "@firebase/app": "^0.9.1",
    "@firebase/firestore": "^3.8.1",
    "@perroudsky/react-native-deck-swiper": "^2.0.13",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "deprecated-react-native-prop-types": "^4.0.0",
    "expo": "^47.0.13",
    "expo-application": "~5.0.1",
    "expo-auth-session": "~3.8.0",
    "expo-random": "~13.0.0",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "firebase": "^9.16.0",
    "globe.gl": "^2.26.6",
    "prop-types": "^15.8.1",
    "re": "^0.1.4",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-deck-swiper": "^2.0.12",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-web": "~0.18.9",
    "tailwind-rn": "^4.2.0",
    "tslib": "^2.4.0",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "concurrently": "^7.5.0",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:react-native/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  },
  "private": true
}
MarkDuckworth commented 1 year ago

Unfortunately, I'm unable to see where you define or import firebase, so I'm unable to help you understand why this is failing. If you can provide this information, I may be able to help you.

However, in the meantime, here are a few links that may be relevant to getting started with Firestore and using Firestore with expo:

google-oss-bot commented 1 year ago

Hey @Shange-Fagan. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

google-oss-bot commented 1 year ago

Since there haven't been any recent updates here, I am going to close this issue.

@Shange-Fagan if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.