当我使用 import * as firebase from 'firebase' 导入 firebase 时；？

Question

向我显示此错误？

无法从“App.js”解析“firebase” 构建 JavaScript 包失败。

我曾尝试寻找答案，但这些是针对 firebase 的先前版本我也尝试过添加此导入但没有解决我的问题。

从“@firebase/app”导入 firebase

},
 "dependencies": {
"expo": "^33.0.0",
"firebase": "^6.3.0",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk- 
33.0.0.tar.gz",
"react-native-gesture-handler": "^1.3.0",
"react-native-web": "^0.11.4",
"react-navigation": "^3.11.1"
 },

有人可以帮忙吗

Answer 1

您应该以这种方式更新导入和代码以使其正常工作。

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

const firebaseConfig = { // Have the firebase config here
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth, db };

Answer 2

在firebase npm package 的文档中，他们说：

如果你使用带有 --experimental-modules 标志的原生 ES6 模块，你应该这样做：

 // This import loads the firebase namespace. import firebase from 'firebase/app'; // These imports load individual services into the firebase namespace. import 'firebase/auth'; import 'firebase/database';

所以尝试更换

import * as firebase from 'firebase'

和

import firebase from 'firebase/app'

您也可以考虑为 react-native https://github.com/invertase/react-native-firebase使用 firebase 包装器构建。 它需要您进行文档中描述的额外设置，但效果更好。

Answer 3

尝试：

npm install --save firebase

Answer 4

像这样导入

import firebase from 'firebase/compat/app';
import "firebase/storage";

// 您的网络应用的 Firebase 配置

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

// 初始化 Firebase

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore;
const auth = app.auth;
const storage = firebase.storage;

export { auth, db, storage };

Answer 5

如果您使用的是版本 9，那么不要忘记导入 firebase 的情况有所改变 现在有一个“兼容性”选项，因此可以在导入中使用 /compat 文件夹。 这是一个例子。

//to use firebase app
import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9

//to use auth
import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9

//to use firestore
import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9

Answer 6

请注意，如果您使用的是较新版本的 firebase，即 > 9.x，请改用此版本：

import firebase from 'firebase/compat/app';