CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
Iared
Iared

Reputation: 1

Firebase 'collection' is not exported from 'firebase/firestore'

I'm trying to import "collection" on my project, but I got this error only on "collection". I followed the firebase docs about query, but I've no idea how to solve it.

React:

import { query, where, getDocs, collection } from "firebase/firestore";

  const [username, setUsername] = useState("")
  const [utente, setUtente] = useState(null)
  const [err, setErr] = useState(false)
  const handleSearch = async () =>{
  const q = query(collection(db, "users"), where("displayName", "==", username)
  );
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});};

  const handleKey = e=>{
    e.code === "Enter" && handleSearch();
  };

Package.json:

{
  "name": "whatsapp-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@mui/material": "^5.10.5",
    "compressorjs": "^1.0.7",
    "emoji-picker-react": "^3.6.2",
    "firebase": "^8.6.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scrollable-feed": "^1.3.1",
    "uuid": "^8.3.2"
  },

Thank you very much in advance

Upvotes: 0

Views: 65

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

You are using Firebase 8.6.3 but the modular syntax was introduced starting from v9.0.0. Upgrading to latest version should fix the issue:

npm i firebase@latest

You can alternatively use the Namespaced syntax with the current version but I'll recommend upgrading and using the new one.

Upvotes: 2

Related Questions