Getting started with Firebase for the web

What people said

Recommends Dharmaraj · 2021-08 · Stack Overflow · on “Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')”

Firebase modular SDK ( v9 ) is officially released and npm install firebase now installs this instead of the older namespaced version ( v8 ). If you are using v9 then refactor your code to this: import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getDatabase } from "firebase/database"; const app = initializeApp({...config}); export const auth = getAuth() const database = getDatabase(); export { auth, database } I'd recommend following the documentation [LINK] and continue using the new modular SDK. If you have an existing and want to use the existing namespaced version, then you can replace your imports with compat libraries as follows: import fire

Recommends Dharmaraj · 2021-09 · Stack Overflow · on “Property 'auth' does not exist on type 'FirebaseApp' on REACT”

You are using the new Modular SDK [LINK] which uses a different syntax than the name-spaced ( v8 ) version. Try this: import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // New import const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export default app; Do note that if you must refactor all your code to work with the new syntax. I'd recommend checking out the documentation [LINK] to learn more about the new syntax. Also checkout this Firecast [this video] . If you wish to use the V8 name-spaced syntax, then you can use the compat versions: import firebase from "firebase/compat/app"; import "firebase/compat/auth"; if (!firebase.apps.len

Recommends Peter Friese · 2021-09 · Stack Overflow · on “Firebase 9 modular -how to start”

I ran into the same issue and was able to resolve it by closely watching David's video around the 5:40 timestamp [this video] . Here is the basic boilerplate that works when serving locally: import { initializeApp } from ' [LINK] '; import { getAuth, onAuthStateChanged } from ' [LINK] '; const firebaseApp = initializeApp({ // (insert your Firebase configuration here) }); const auth = getAuth(firebaseApp); onAuthStateChanged(auth, user => { if (user) { console.log('Logged in as ${user.email}' ); } else { console.log('No user'); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width

Recommends Dharmaraj · 2021-09 · Stack Overflow · on “Module not found: Can't resolve 'firebase' in react js”

You are not using the new Modular syntax. You can keep using existing code by changing the imports to compat version: import firebase from 'firebase/compat/app' import 'firebase/firestore' // import 'firebase/[SERVICE_NAME]' However, I'd recommend upgrading to the new Modular SDK [LINK] , which offers some benefits with tree-shaking. Checkout this Firecast for detailed information: Getting started with Firebase for Web [this video]

Recommends Dharmaraj · 2021-09 · Stack Overflow · on “Missing types on firebase auth lib”

You are not using the new Modular Syntax which was introduced from V9.0.0 . The new syntax looks like: import { initializeApp } from "firebase/app" import { getAuth } from "firebase/auth" const app = initializeApp({...config}) const auth = getAuth(app) export { auth } If you want to use existing name-spaced syntax, then you can use compat versions: import firebase from "firebase/compat/app" import "firebase/compat/auth" I'd recommend following the upgrading to new Modular syntax [LINK] and following the documentation [LINK] which has examples of both the syntaxes. Also checkout this Firecast [this video] to learn more about the new SDK.

Recommends Dharmaraj · 2021-09 · Stack Overflow · on “Uncaught (in promise): TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function”

It seems you are using older name-spaced syntax but importing Firebase storage using the new Modular/Functional syntax. // Change this import { getStorage, ref } from "firebase/storage"; // To this import "firebase/compat/storage" I'd recommend checking out then new Modular SDK [LINK] and upgrading to it. Also checkout this Firecast [this video] to learn more about the new SDK.

Recommends Dharmaraj · 2021-09 · Stack Overflow · on “Failed to compile ./src/App.js Module not found: Can't resolve 'firebase'”

If you have v9.0.0+ installed, then change your import to compat version: import firebase from 'firebase/compat/app'; // import "firebase/compat/[SERVICE_NAME]" I'd recommend checking out the new Modular SDK [LINK] which has certain performance benefits. You can checkout this Firecast [this video] to learn more about the new SDK. The new syntax looks like: import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; import { getStorage } from 'firebase/storage'; const firebaseApp = initializeApp({ ... }); const db = getFirestore(firebaseApp); const auth = getAuth(firebaseApp); const storage = getStorage(firebaseApp); exp

Cites Dharmaraj · 2021-08 · Stack Overflow · on “Firebase Modular SDK V9.0.0+ TypeError: Cannot read property 'apps' of undefined firebase”

Since you are using the new Modular SDK v9.0.1 which does not use firebase. namespace, you should use getApps() instead of firebase.apps . import { initializeApp, getApps } from "firebase/app" import { getFirestore } from "firebase/firestore" import { getAuth } from "firebase/auth" const firebaseConfig = {...} if (!getApps().length) { //.... } const app = initializeApp(firebaseConfig) const db = getFirestore(app) const auth = getAuth(app) export {db, auth} However, you don't need to check if Firebase is already initialized in this new SDK. You can learn more about the new syntax in the documentation [LINK] . Also check: Getting started with Firebase for web [this video]

Cites Andrew Sides · 2021-09 · Stack Overflow · on “Implementing Firebase Authentication to Web app”

I am trying to create a login system using Firebase authentication and I am running into several errors. After following Google's tutorial ( [this video] ) and creating a simple "Index.html" & "Index.js" test, I received the error "Uncaught SyntaxError: Cannot use import statement outside a module index.js:1". I can change the .js to a .mjs and read it in as a module, but then the .html file cannot find the functions in the .mjs file. onAuthStateChanged() logs "No user", so I know that's working. I've been testing via localhost if that makes any difference. Any help would be greatly appreciated! index.mjs import { initializeApp } from ' [LINK] '; import { getAuth, onAuthStateChanged } from ' [LIN

Cites Sandeep Shaw · 2021-10 · Stack Overflow · on “React NextJS Firebase error refresh Firebase App named '[DEFAULT]' already exists”

If you are using a new Modular SDK v9.0.1 then it might not support the "firebase" namespace. The Implementation, I used import { initializeApp, getApps } from "firebase/app" import { getFirestore } from "firebase/firestore" import { getAuth } from "firebase/auth" //App configure const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, measurementId: process.env.NEXT_PUBLIC_MEASU