So I have tried methods in "similar question" with no luck so therefore making new one.

I got 2 files,

1: firebase.js:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import "firebase/firestore";
import "firebase/auth";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// here i want to import the seed file
import { seedDatabase } from "../seed";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "something",
  authDomain: "something",
  projectId: "something",
  storageBucket: "something",
  messagingSenderId: "something",
  appId: "something",
  measurementId: "something",
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const FieldValue = initializeApp.firebase;

// here is where i want to call the seed file (Only once)
// seedDatabase(firebase);

console.log("firebaseApp", firebaseApp);
seedDatabase(firebaseApp);

export { firebaseApp, analytics, FieldValue };

second file: seed.js:

export function seedDatabase(firebase) {
  const users = [
    {
      userId: "zUl6iYVhYJU7goNIw8U1vhno5v93",
      username: "Danier",
      fullName: "Danier Valiev",
      emailAddress: "[email protected]",
      following: ["2"],
      followers: ["2", "3", "4"],
      dateCreated: Date.now(),
    },
    {
      userId: "2",
      username: "raphael",
      fullName: "Raffaello Sanzio da Urbino",
      emailAddress: "[email protected]",
      following: [],
      followers: ["zUl6iYVhYJU7goNIw8U1vhno5v93"],
      dateCreated: Date.now(),
    },
    ];
    
    // eslint-disable-next-line prefer-const
  for (let k = 0; k < users.length; k  ) {
    firebase.firestore().collection("users").add(users[k]);
  }

  // eslint-disable-next-line prefer-const
  for (let i = 1; i <= 5;   i) {
    firebase
      .firestore()
      .collection("photos")
      .add({
        photoId: i,
        userId: "2",
        imageSrc: `/images/users/raphael/${i}.jpg`,
        caption: "Saint George and the Dragon",
        likes: [],
        comments: [
          {
            displayName: "dali",
            comment: "Love this place, looks like my animal farm!",
          },
          {
            displayName: "orwell",
            comment: "Would you mind if I used this picture?",
          },
        ],
        userLatitude: "40.7128°",
        userLongitude: "74.0060°",
        dateCreated: Date.now(),
      });
  }
}

In my console.log i am getting this error:

seed.js:43 Uncaught TypeError: firebase.firestore is not a function
at seedDatabase (seed.js:43:1)
at ./src/lib/firebase.js (firebase.js:34:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.js (firebase.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1

Incase you want to look at index.js, this is the code there:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import FirebaseContext from "./context/firebase";
import { firebaseApp, analytics, FieldValue } from "./lib/firebase";

ReactDOM.render(
  <FirebaseContext.Provider value={{ firebaseApp, analytics, FieldValue }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById("root")
);

I cant seem to figure out the problem. I have also tried to delete package.lock.js and node_module, cleared cache and reinstalled node_module but still no luck. Woulc anyone help me out with this one?

Thank you.

CodePudding user response：

First of all, you're mixing two different syntax. The web version 8 which is the dot notation of Firestore and web version 9 which is the modular syntax of Firestore. If you still want to use the web version 8 then you need to use the compat version when using the latest package of Firebase. See the following sample code:

firebase.js:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';
import 'firebase/compat/auth';
    
const firebaseConfig = {
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const analytics = firebaseApp.analytics();
const auth = firebase.auth();

const FieldValue = db.FieldValue;

export { db, analytics, FieldValue, auth };

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import FirebaseContext from "./context/firebase";
import { db, analytics, FieldValue, auth } from "./lib/firebase";

ReactDOM.render(
  <FirebaseContext.Provider value={{ db, analytics, FieldValue, auth }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById("root")
);

seed.js:

for (let k = 0; k < users.length; k  ) {
    db.collection("users").add(users[k]);
}

// eslint-disable-next-line prefer-const
for (let i = 1; i <= 5;   i) {
    db
    .collection("photos")
    .add({
    photoId: i,
    userId: "2",
    imageSrc: `/images/users/raphael/${i}.jpg`,
    caption: "Saint George and the Dragon",
    likes: [],
    comments: [
      {
        displayName: "dali",
        comment: "Love this place, looks like my animal farm!",
      },
      {
        displayName: "orwell",
        comment: "Would you mind if I used this picture?",
      },
    ],
    userLatitude: "40.7128°",
    userLongitude: "74.0060°",
    dateCreated: Date.now(),
    });
}

For more information, you may check these documentation:

• Upgrade from version 8 to the modular Web SDK