FirebaseError：Firebase：没有创建 Firebase 应用“[DEFAULT]”（在 NextJS 上）

Question

在尝试将 Firebase 身份验证与我的项目集成时，我遇到了这个错误：

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at app (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/node_modules/@firebase/app/dist/index.node.cjs.js:356:33)
    at Object.serviceNamespace [as auth] (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/node_modules/@firebase/app/dist/index.node.cjs.js:406:51)
    at eval (webpack-internal:///./lib/firebase.js:28:66)
    at Object../lib/firebase.js (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:22:1)
    at __webpack_require__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/enter.js:7:71)
    at Object../pages/enter.js (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:33:1)
    at __webpack_require__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:87:52)
    at /Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:88:28
    at Object.<anonymous> (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:91:3)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19) {
  code: 'app/no-app',
  customData: { appName: '[DEFAULT]' }

每当我请求 localhost:3000/enter 时都会收到此错误

这是 Javascript 代码：

firebase.js

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

var firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

if (!firebase.app.length) {
  firebase.initializeApp(firebaseConfig)
}

export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()

进入.js

import { auth, googleAuthProvider } from '../lib/firebase'

export default function SignInPage() {
  return (
    <>
      <SignInButton />
    </>
  )
}

// Google Sign In Component
const SignInButton = () => {
  const signInWithGoogle = async () => {
    await auth.signInWithPopup(googleAuthProvider)
  }
  return (
    <button onClick={signInWithGoogle}>Sign in with Google</button>
  )
}

// Sign Out Button component
export const SignOutButton = () => {
  return (
    <button onClick={() => auth.signOut}>Sign in with Google</button>
  )
}

我似乎无法弄清楚导致错误的原因。我确实初始化了一个 firebase 应用，所以我不确定这里发生了什么。

Answer 1

适用于使用 firebase V9 的任何人。这是你需要做的。

import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";

const clientCredentials = {
  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,
};

const app = initializeApp(firebaseConfig);
const firestore = getFirestore();
export { firestore }

你应该没事的

Answer 2

使用 NextJs 自动代码拆分，您永远不知道它会删除什么。我认为 NextJs 正在查看您的 firebase.js 并仅包含您使用的内容：

import firebase from 'firebase/app'

export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()

我会在您每次使用 Firebase 时检查它是否已设置。

Firebase 网络 V9

import { getApp as _getApp, getApps, initializeApp } from "firebase/app";
import { getAuth as _getAuth } from "firebase/auth";
import { enableIndexedDbPersistence, getFirestore as _getFirestore } from "firebase/firestore";

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

const firebaseIsRunning = () => !!(getApps().length);

export function getApp() {
  if (!firebaseIsRunning()) initializeApp(config);

  return _getApp();
}

export function getFirestore() {
  const isRunning = firebaseIsRunning();
  if (!isRunning) getApp();

  const db = _getFirestore();

  if (!isRunning)
    if (typeof window !== undefined) enableIndexedDbPersistence(db)

  return db;
}

export function getAuth() {
  if (!firebaseIsRunning()) getApp();
  return _getAuth();
}