`Firebase` package 已成功找到。 但是，這個 package 本身指定了一個無法解析的“主”模塊字段

Question

我正在嘗試在 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 package ：

expo install firebase

任何幫助將不勝感激。 謝謝！

Answer 1

嘗試在firebase.js 文件中使用此導入語句

import  firebase  from 'firebase/compat';

Answer 2

為了減小應用程序的大小，firebase SDK (v9.0.0) 變得模塊化。 您不能再像以前那樣在 v8 上執行 import 語句。

你有兩個選擇。

1. 使用向后兼容的方式。 （稍后將刪除）：

這個：

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';

2. 現在重構你的代碼。

由此：

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

你絕對應該檢查文檔

Answer 3

我今天遇到了同樣的問題，就我而言，它已通過以下方式解決。

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)

這個鏈接真的很有幫助

為了安全起見，我分享了我的 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 };

Answer 4

卸載 firebase，然后安裝 firebase@8.2.3

Answer 5

首先檢查你的package.json，你的firebase版本是什么。

"firebase": "9.9.1",

如果超過 9.0.0，您可以將其更改為

"firebase": "8.2.3",

並運行

npm install

它對我有用。

Answer 6

經過大量研究后，我發現我們沒有將 Metro 配置為 read.cjs 擴展。

在根文件夾中創建一個 metro.config.js 文件並粘貼此代碼。

 const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { assetExts }, } = await getDefaultConfig(); return { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, resolver: { assetExts: [...assetExts, "cjs"], }, }; })();