已成功找到“Firebase”包。但是，这个包本身指定了一个无法解析的“主”模块字段

Posted 2023-03-08

【中文标题】已成功找到“Firebase”包。但是，这个包本身指定了一个无法解析的“主”模块字段

【英文标题】：`Firebase` package was successfully found. However, this package itself specifies a `main` module field that could not be resolved

【发布时间】：2021-12-17 05:32:23

【问题描述】：

我正在尝试在 expo 托管的 react-native 应用程序中读取和写入 firestore，使用 firebase 的身份验证和 firebase 的存储。

完全错误：

While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:

  * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

我的 Firebase 配置文件：

import firebase from "firebase";
import  initializeApp  from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

// I'm using the example key here, I have the correct config
const firebaseConfig = 
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
;

if (firebase.apps.length === 0) 
  initializeApp(firebaseConfig);


const db = firebase.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export  db, auth, storage ;

我安装了firebase 包：

expo install firebase

任何帮助将不胜感激。谢谢！

【参考方案1】：

我今天遇到了同样的问题，就我而言，它已通过以下方式解决。

1.

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

从↓改变

if (firebase.apps.length === 0) 
  initializeApp(firebaseConfig);

到↓

app = firebase.initializeApp(firebaseConfig)

This link was really helpfull

为了安全起见，我分享了我的 firebase.js（隐藏个人信息）

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

const firebaseConfig = 
  apiKey: "AIzxxxxxxxxxxxxxxxxxxxBbBFNGMI",
  authDomain: "sixxxxxxxxxcc8.firebaseapp.com",
  projectId: "sxxxxxxxxxxx8",
  storageBucket: "xxxxxxxxxxxxxcc8.appspot.com",
  messagingSenderId: "6xxxxxxxxxx",
  appId: "1:65xxxxxxxx13:web:d0exxxxxxxxxxxxxxxxx7c"
;

let app;

if (firebase.apps.length === 0) 
  app = firebase.initializeApp(firebaseConfig)
 else 
  app = firebase.app();


const db = app.firestore();
const auth = firebase.auth();

export  db, auth ;

【讨论】：

为我工作，兄弟，谢谢！

【参考方案2】：

为了减小应用程序的大小，firebase SDK (v9.0.0) 变得模块化。您不能再像以前那样在 v8 上执行 import 语句。

你有两个选择。

使用向后兼容的方式。 （稍后将被删除）：

这个：

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

应改为：

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

现在重构您的代码。

从这里：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user =>  
  // Check for user status
);

到这里：

import  getAuth, onAuthStateChanged  from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => 
  // Check for user status
);

你一定要检查documentation

【参考方案3】：

先卸载firebase，然后安装firebase@8.2.3