无法从'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",
    ...
...

- Marko

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一起使用。

- kareem adel

---

嘿，Kareem！我在最初的问题中稍微提到了这个问题，但我确实尝试过了，仍然得到相同的错误。执行"./"实际上仍然指向屏幕文件夹内部而不是项目根目录。这两个选项都没有起作用。 - Marko

我明白了，我尝试按照您上面说的做，但出现了错误，提示项目中没有firebase/app。我之前安装了@react-native-firebase/app。然后我回去运行了npm install firebase，问题就解决了。我之前尝试用'react-native-firebase/app'替换'firebase'导入，但是还是出现了同样的错误。可能这就是为什么我没能更早地想到这个方法的原因吧。无论如何，感谢您的帮助！问题已经解决了。 - Marko

很高兴能够帮到你，但是如果你正在使用expo，你不能使用firebase的所有功能，你只能使用你现在正在使用的web版本，获取更多信息请参考：https://rnfirebase.io/#expo https://docs.expo.io/guides/using-firebase/#usage-with-expo - kareem adel

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

我希望它能够对那些遇到和我一样问题的人提供帮助

- Barnabás Molnar

Answer 3

谷歌已将Firebase从版本8更新为模块化Web SDK。因此，如果您正在使用firebase@>9.0.0，则会有所不同。 在firebase.js文件中，您需要像这样导入Firebase。

import firebase from "firebase/compat/app";

因此，您的firebase.js示例将如下所示：

import firebase from "firebase/compat/app";
import { FIREBASE_CONFIG } from "./constants/firebase";
import "firebase/compat/storage";

firebase.initializeApp(FIREBASE_CONFIG);
export const storage = firebase.storage();
export default firebase;

这里的FIREBASE_CONFIG是您的Firebase配置。

如示例所示，可以在其他文件中使用此storage对象。 就像我在这里使用此storage对其他函数进行了操作，例如上传文件等。

我尚未尝试过其他服务（如身份验证），但至少firebase-storage服务对我有效。

- Shubhrajyoti Dey

Answer 4

我上次安装 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，并且有很多变化。请参考官方文档这里了解有关在项目中设置 Firebase 的帮助。

- Segun

Answer 5

cd src 进入项目文件夹内的 src 目录，然后执行 npm install firebase 命令。我之前也遇到了同样的问题，但这个解决方案解决了我的问题。

- Wasi Sharief