Next JS firebase TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_1__.storage is not a function

Question

import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';

已经在此处添加了 firestore 导入，以便解决大多数人的问题

const clienteCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

export default function initFirebase() {
  if (!firebase.apps.length){
      firebase.initializeApp(clienteCredentials);
  }
}

这里一直出现错误：

    const projectStorage = firebase.storage();
    const projectFirestore = firebase.firestore();


export { projectFirestore, projectStorage };

Answer 1

如果您使用的是 Firebase V9.0.0+，那么您可以使用 compat 版本来继续使用现有代码（V8 命名空间语法）：

import firebase from "firebase/compat/app"
import "firebase/compat/storage"
import "firebase/comapt/firestore"

我推荐 upgrading to new Modular Syntax，它有一定的好处并且支持 tree-shaking。较新的语法如下所示：

import { initializeApp } from "firebase/app" // no compat
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"

const app = initializeApp({...config})

const firestore = getFirestore(app)
const storage = getStorage(app)

请查看 documentation，其中包含新旧语法的示例。

Next JS firebase TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_1__.storage is not a function

Next JS firebase TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_1__.storage is not a function

javascript

firebase

firebase-storage

next.js