Error while using db.collection() in react project-CodePudding

Error:

firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.storage is not a function

import React, { useEffect } from "react";
import styled from "styled-components";
import ImageSlider from "./ImageSlider";
import Movies from "./Movies";
import Viewers from "./Viewers";
import Footer from "./Footer";
import db from "../firebase";

const Home = () => {
  useEffect(() => {
    db.collection("movies").onSnapshot((snapshot) => {
      console.log(snapshot);
    });
  }, []);
};

I don't understand why this error occurred.

CodePudding user response：

The error message "firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.storage is not a function" suggests that the "storage" property is not a function on the default export of the "firebase_compat_app" module. This means that the code is trying to access the "storage" property as if it were a function, but it is not.

This error might occur if the import of 'firebase' library is not done properly in the code. Make sure that you have imported 'firebase' library correctly and also it is initialized with the correct configuration.

Also, the error might occur if you are trying to use the 'storage' module but it is not included in the import statement or not enabled in the firebase project.

It is also possible that you are trying to use the storage module in an unsupported way with the version of the firebase library that you have installed.

CodePudding user response：

Yo must try to import Firebase Storage SDK as well. Try to use the following code:

import React, { useEffect } from "react";
import styled from "styled-components";
import ImageSlider from "./ImageSlider";
import Movies from "./Movies";
import Viewers from "./Viewers";
import Footer from "./Footer";

// New addition of firebase storage to existing code
import 'firebase/compat/storage';

import db from "../firebase";

const Home = () => {
  useEffect(() => {
    db.collection("movies").onSnapshot((snapshot) => {
      console.log(snapshot);
    });
  }, []);
}

Hope the above information helps!