CODEWITHSUNDEEP
javascriptfirebasevue.js
user9260954
user9260954

Reputation:

Uncaught TypeError: Cannot read property 'initializeApp' of undefined

I'm trying to use a few Firebase libraries in my Vue project (I installed it using npm install firebase).

I added those in main.js:

import { Firebase } from 'firebase/app'
import 'firebase/analytics'
import 'firebase/auth'
import 'firebase/messaging'

Firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx'
})

And I get:

Uncaught TypeError: Cannot read property 'initializeApp' of undefined

Upvotes: 18

Views: 22192

Answers (5)

Móhàmméd Shóàíb
Móhàmméd Shóàíb

Reputation: 1

TypeError: Cannot read properties of undefined (reading 'initializeApp')
 
**Please Follow Steps From** https://firebaseopensource.com/projects/rakannimer/react-firebase/

If Still Stuck on Same Issue It Must Be error Of Not Installing the sub packages
Required

npm i @react-firebase/database --force Install This. 

**my Code** 
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_DOMAIN_KEY",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase`enter code here`
const app = initializeApp(firebaseConfig);

Upvotes: 0

Nadav
Nadav

Reputation: 1819

Check your Firebase version in your package.json file. If it is 9+ it should be something like this:

import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { getAuth } from "firebase/auth";

and then:

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

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const db = getFirestore(firebase);
const auth = getAuth(firebase);

Upvotes: 4

GigaTera
GigaTera

Reputation: 1252

Error that appears caused by the difference of the version you use with the installed SDK version

Simply change from like this :

import { Firebase } from 'firebase/app'
import 'firebase/analytics'
import 'firebase/auth'
import 'firebase/messaging'

to this:

   import { Firebase } from 'firebase/compat/app'
   import 'firebase/compat/analytics'
   import 'firebase/compat/auth'
   import 'firebase/compat/messaging'

For clearer info, you can read this SDK9

Upvotes: 0

Dinis Rodrigues
Dinis Rodrigues

Reputation: 605

For newcomers using the newest Firebase Modular API (v9) a refactoring is required.

The imports must be changed to this:

import { FirebaseApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";

const firebaseConfig = {...}

// Initialize Firebase
const app: FirebaseApp = initializeApp(firebaseConfig);

const db = getDatabase(app);

const auth = getAuth(app);

About this new refactoring style here

And more information on how Read and Write data changed here

Upvotes: 15

Peter Haddad
Peter Haddad

Reputation: 80914

Change this:

import { Firebase } from 'firebase/app'

into this:

import * as firebase from "firebase/app";

import everything from firebase/app then do:

firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx'
})

Upvotes: 33

Related Questions