Question 119275 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase not working with react typescript properly

I am using react typescript setup using vite.

firebase version : 9.15.0

This is my firebase.ts

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "@firebase/firestore";

const firebaseConfig = {
  apiKey: "credentials",
  authDomain: "credentials",
  projectId: "credentials",
  storageBucket: "credentials",
  messagingSenderId: "credentials",
  appId: "credentials",
  measurementId: "credentials",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
export const db = getFirestore(app);

It shows a blank page.

when i inspected the page, it shows this.

when i remove getFirestore(app) it works fine.

Tags:

2

Answers


  1. 0

    Try to call getFirestore(app) and not getFirestore()

    import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "@firebase/firestore";

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
export const db = getFirestore(app);
    Login or Signup to reply.
  2. 0

    Try to exclude firebase in vite’s optimizeDeps :

    import { sveltekit } from "@sveltejs/kit/vite";
import pkg from "./package.json";

/** @type {import('vite').UserConfig} */
const config = {
  optimizeDeps: {
    exclude: [
      "firebase",
      "firebase/app",
      "firebase/auth",
      "firebase/firestore",
      "firebase/analytics",
    ],
  },
  define: {
    __VERSION: JSON.stringify(pkg.version),
  },
  plugins: [sveltekit()],
};

    found this solution in github

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search