无法从“firebase.js”解析模块“firebase”：在项目中找不到 Firebase

Posted 2023-02-22

【中文标题】无法从“firebase.js”解析模块“firebase”：在项目中找不到 Firebase

【英文标题】：Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project

【发布时间】：2021-01-06 12:03:48

【问题描述】：

我在将 firebase 引入该项目时遇到问题，我真的不确定出了什么问题？所有 firebase 代码（项目特定的配置代码除外）与另一个（工作）项目完全相同...

我将 react-native 与 expo 一起使用，并将 FB 数据库作为 Web 项目。

我在项目根级别的名为 firebase.js 的文件中初始化数据库，它位于 app.js 旁边。数据库还没有安全规则，所以我删除了一些信息，但它是您对 api 密钥的期望。

import * as firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = 
    apiKey: "removed for post",
    authDomain: "removed for post",
    databaseURL: "removed for post",
    projectId: "goalsdev-7eb67",
    storageBucket: "goalsdev-7eb67.appspot.com",
    messagingSenderId: "362368452051",
    appId: "removed for post",
    measurementId: "G-CNRGY3FTLE"
;

firebase.initializeApp(firebaseConfig);

export default firebase;

然后我尝试像这样使用它......

import firebase from 'firebase'

这在 /screens/signUpFinal 中，也尝试过导入为 'firebase.js'、'../firebase' 和 '../firebase.js '

package.json 是：

...
"dependencies": 
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^8.4.3",
    "@react-native-firebase/auth": "^9.2.3",
    ...
...

【参考方案1】：

第一次运行

npm install --save firebase

而不是这个：

import * as firebase from "firebase"

使用这个：

import * as firebase from "firebase/app";

来源：https://firebase.google.com/docs/web/setup#node.js-apps

还有这个：

import firebase from 'firebase'

到这里：

import firebase from '../firebase'

并删除 @react-native-firebase 库，因为它们不适用于 expo。

【讨论】：

嗨，卡里姆！我在最初的问题中谈到了这一点，但我确实尝试了这个，但仍然遇到同样的错误。执行“./”实际上仍然指向屏幕文件夹内部，而不是项目的根目录。那和“../”都不起作用。

我明白了，我尝试按照您上面所说的进行操作，并通过 firebase/app 不在项目中的错误来解决。我安装了一个@react-native-firebase/app。我回去运行 npm install firebase 并修复它。不久前，我尝试用“react-native-firebase/app”替换“firebase”导入，但遇到了同样的错误。猜猜这就是为什么我没有早点想到这个。无论哪种方式，感谢您的帮助！搞定了。

很高兴我能帮上忙 ?，但是如果您使用 expo，则无法使用 firebase 的所有功能，您只能使用您现在正在使用的网络版本，以获取更多信息：rnfirebase.io/#expo docs.expo.io/guides/using-firebase/#usage-with-expo

【参考方案2】：

我发现这是在 React.js 中使用的最好/最简单的方法，没有问题......你可以尝试像这样导入 ("firebase": "^9.6.1",) :

        import firebase from 'firebase/compat/app';
        import 'firebase/compat/auth';
        import 'firebase/compat/firestore';

创建你的配置文件.....

    const firebaseConfig =  your config data ...;

然后你就可以这样使用它而不会出现任何恼人的错误：

    const firebaseApp = firebase.initializeApp(firebaseConfig);

    const db = firebaseApp.firestore();

    const auth = firebase.auth();

    const provider = new firebase.auth.GoogleAuthProvider();

希望对遇到和我一样问题的人有所帮助

【参考方案3】：

我上一次必须安装 firebase 是在 6 个月前，那是“firebase”：“^8.6.2”。配置看起来像这样；

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/messaging';
import 'firebase/analytics';
import 
API_KEY,
AUTH_DOMAIN,
DATABASE_URL,
PROJECT_ID,
STORAGE_BUCKET,
MESSAGING_SENDER_ID,
APP_ID,
MEASUREMENT_ID,
MESSAGING_VAPID_KEY,
 from '../config';

const config = 
 apiKey: API_KEY,
 authDomain: AUTH_DOMAIN,
 databaseURL: DATABASE_URL,
 projectId: PROJECT_ID,
 storageBucket: STORAGE_BUCKET,
 messagingSenderId: MESSAGING_SENDER_ID,
 appId: APP_ID,
 measurementId: MEASUREMENT_ID,
;

// Initialize Firebase App with Configurations
firebase.initializeApp(config);

// Setup Firestore
const analytics = firebase.analytics();
const database = firebase.firestore();
const storage = firebase.storage();

// Setup push messaging
let messaging = null;
if (firebase.messaging.isSupported()) 
  messaging = firebase.messaging();
  messaging.usePublicVapidKey(MESSAGING_VAPID_KEY);


export 
  firebase, storage, messaging, analytics, config, database as default,
;

截至发帖时，Firebase 为 v9，并且发生了很多变化。请参考官方文档here

获取有关在项目上设置 firebase 的帮助。

【参考方案4】：

cd src from project file inside src do npm install firebase,我遇到了同样的问题，但是这个解决方案解决了我的问题。