找不到模块“firebase”或其相应的类型声明。 React + TypeScript + Firebase

Posted

技术标签:

【中文标题】找不到模块“firebase”或其相应的类型声明。 React + TypeScript + Firebase【英文标题】:Cannot find module 'firebase' or its corresponding type declarations. React + TypeScript + Firebase 【发布时间】:2021-10-28 15:14:53 【问题描述】:

我想将我在一月份从事的 React 项目更改为使用 typescript。我安装了所有类型和软件包,唯一给我带来问题的文件是 firebase 文件。

这是我当时使用 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 _;

当我更改为打字稿时,当我将鼠标悬停在 vscode 中的 import firebase from "firebase"; 行时,我收到了这个错误。

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

这是我的 package.json,我正在使用 yarn


  ...
  "private": true,
  "dependencies": 
    ..
    "firebase": "^9.0.0",
    ...
  ,
  "scripts": 
 ..
  ,
  "eslintConfig": 
   ..
  ,
  "browserslist": 
 ..
  ,
  "devDependencies": 
    "@types/firebase": "^3.2.1",
    "@types/react-router-dom": "^5.1.8"
  

【问题讨论】:

【参考方案1】:

这是因为默认导入来自firebase/app 而不是firebase

祝你有美好的一天:)

编辑:没有看到您使用的是 SDK 的 V9。在这个版本中,firebase 的初始化和所有逻辑都不相同。 按照本指南更新您的代码https://firebase.google.com/docs/web/modular-upgrade

【讨论】:

【参考方案2】:
"firebase": "^9.0.0",
// ...
"@types/firebase": "^3.2.1",

您可能会注意到这些是非常不同的版本号。那是因为 firebase 带有内置类型,因此不再需要 @types/firebase 包,并且在 4 年内没有更新。从你的 package.json 中删除 "@types/firebase": "^3.2.1", 并重新运行 yarn

【讨论】:

以上是关于找不到模块“firebase”或其相应的类型声明。 React + TypeScript + Firebase的主要内容,如果未能解决你的问题,请参考以下文章

React,Typescript - 找不到模块...或其相应的类型声明

找不到模块“护照”或其相应的类型声明

找不到模块“下一个”或其相应的类型声明

测试套件未能运行找不到模块或其相应的类型声明

VSCode:找不到模块“antd”或其相应的类型声明

找不到模块“graphql/tsutils/Maybe”或其相应的类型声明