Firebase JavaScript SDK

Common errors

• Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

  cause Attempting to use a Firebase service (e.g., getAuth(), getFirestore()) before `initializeApp()` has been successfully called.
  fix Ensure `initializeApp(firebaseConfig)` is called once at the start of your application's lifecycle before any Firebase service-specific functions are invoked. This call should typically be near your app's entry point.

• Error: Modular code path not found for firebase/auth. Did you mean firebase/compat/auth?

  cause This error occurs when a bundler or runtime cannot find the expected modular entry point, often due to an incorrect import path or mixing modular imports with the older 'compat' API usage.
  fix Verify that your import statements are correct for the modular API (e.g., `import { getAuth } from 'firebase/auth';`). If you intend to use the compat API, explicitly import from `firebase/compat/auth`.

• TypeError: __webpack_require__.i(...) is not a function

  cause This Webpack-specific error (or similar from other bundlers) often arises when using `require('firebase/app')` or an older CommonJS pattern in a project configured for ES Modules (ESM) with the modern Firebase SDK.
  fix Switch all Firebase imports to the ES Module syntax (e.g., `import { initializeApp } from 'firebase/app';`). Ensure your bundler configuration (e.g., Webpack, Rollup, Vite) is correctly set up to handle ESM.

Warnings

• breaking Version 9 introduced a completely redesigned modular API to enable tree-shaking and reduce bundle sizes. The previous 'compat' API still works but is not tree-shakable.
  Fix: Migrate your application to the modular API by importing specific functions from service modules (e.g., 'firebase/app', 'firebase/auth') and using functional patterns (e.g., getAuth(), signInWithEmailAndPassword()). Refer to the Firebase 'Upgrade to Version 9' guide.
• deprecated All Imagen models provided by the `@firebase/ai` package are officially deprecated and will be shut down as early as June 2026.
  Fix: Users of `@firebase/ai` should plan to migrate their applications to alternative AI models or services by June 2026. Consult Firebase documentation for recommended replacements.
• deprecated The `sendMediaChunks()` and `sendMediaStream()` methods within the `@firebase/ai` package's `LiveSession` class have been deprecated.
  Fix: Instead of the deprecated methods, use the new methods that have been added to the `LiveSession` class for streaming media. Review the `@firebase/ai` changelog for the specific new API.
• gotcha Firebase Authentication for React Native now requires `react-native-async-storage` v2+ as a peer dependency, which may require an update to your `package.json`.
  Fix: Ensure `react-native-async-storage` is installed and updated to version 2 or higher in your React Native project when using Firebase Auth. Run `npm install --save react-native-async-storage@^2.0.0` or `yarn add react-native-async-storage@^2.0.0`.

Install

• npm install firebase npm
• yarn add firebase yarn
• pnpm add firebase pnpm

Imports

• initializeApp
  wrong:

  const firebase = require('firebase/app');
  import firebase from 'firebase';

  correct:

  import { initializeApp } from 'firebase/app';

  Since v9, Firebase uses a modular API for tree-shaking. Import specific functions from service modules, not the top-level 'firebase' package directly for services.
• getAuth
  wrong:

  import firebase from 'firebase/auth'; // Incorrect modular import
  import { auth } from 'firebase'; // Old compat API pattern

  correct:

  import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

  Individual service functions like `getAuth()` are imported from their respective modular paths. The compat API (e.g., `firebase/compat/auth`) still exists but is not tree-shakable.
• getFirestore
  wrong:

  const firestore = require('firebase/firestore').firestore; // CommonJS with modular API
  import { firestore } from 'firebase'; // Old compat API pattern

  correct:

  import { getFirestore, collection, addDoc } from 'firebase/firestore';

  Follow the modular pattern for all services. Each service (Firestore, Realtime Database, Storage, etc.) has its own entry point.
• Auth types

  import type { User } from 'firebase/auth';

  TypeScript types for various Firebase objects are available directly from the service modules.

Quickstart

Initializes a Firebase app and demonstrates adding a document to Cloud Firestore using the modular API.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  // Optional: measurementId: "G-XXXXXXXXXX"
};

async function initializeAndAddData() {
  try {
    const app = initializeApp(firebaseConfig);
    console.log("Firebase app initialized successfully.");

    const db = getFirestore(app);
    const docRef = await addDoc(collection(db, "users"), {
      first: "Ada",
      last: "Lovelace",
      born: 1815
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (error: any) {
    console.error("Error initializing Firebase or adding document:", error.message);
  }
}

initializeAndAddData();