Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot find module 'firebase' or its corresponding type declarations. React + TypeScript + Firebase

I wanted to change my React project that i worked on in january to use typescript. I installed all types and packages the only file that is giving me problems is the firebase file.

This is wat i was having back then Using js.

import firebase from "firebase";
import "firebase/storage";
import "firebase/auth";
import "firebase/firestore";
import dotenv from "dotenv";

dotenv.config();

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};
const app =
  firebase.apps.length > 0
    ? firebase.app()
    : firebase.initializeApp(firebaseConfig);

const auth = app.auth();
const db = app.firestore();
const storage = app.storage();
const timestamp = firebase.firestore.FieldValue.serverTimestamp();

const EmailProvider = new firebase.auth.EmailAuthProvider();
const _ = {
  auth,
  db,
  storage,
  timestamp,
  EmailProvider,
};
export default _;

When i change to typescript I'm getting this error as i hover on the line import firebase from "firebase"; in vscode.

Cannot find module 'firebase' or its corresponding type declarations. 

This is my package.json and im using yarn:

{
  ...
  "private": true,
  "dependencies": {
    ..
    "firebase": "^9.0.0",
    ...
  },
  "scripts": {
 ..
  },
  "eslintConfig": {
   ..
  },
  "browserslist": {
 ..
  },
  "devDependencies": {
    "@types/firebase": "^3.2.1",
    "@types/react-router-dom": "^5.1.8"
  }
}
like image 221
crispengari Avatar asked Mar 04 '26 17:03

crispengari


1 Answers

it's because the default import is from firebase/app and not firebase

Have a nice day :)

Edit: Didn't see that you were using the V9 of the SDK. With this version the initialization and all the logic with firebase is not the same. Follow this guide to update your code https://firebase.google.com/docs/web/modular-upgrade

like image 170
thomas leveque Avatar answered Mar 06 '26 06:03

thomas leveque