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

Question

我在将 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",
    ...
...

Answer 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。

Answer 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();

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

Answer 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 的帮助。

Answer 4

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