javascript - Tingkatkan ke Firebase JS 8.0.0: Kesalahan impor yang dicoba: 'app' tidak diekspor dari 'firebase/app' (diimpor sebagai 'firebase')

Setelah memperbarui ke 8.0.0, saya mendapatkan kesalahan berikut:

Kesalahan impor yang dicoba: 'initializeApp' tidak diekspor dari 'firebase/app' (diimpor sebagai 'firebase').

Impor saya terlihat seperti ini:

import * as firebase from "firebase/app"
firebase.initializeApp({ ... })

TypeScript juga mengeluh:

Properti 'initializeApp' tidak ada pada tipe 'typeof import("/path/to/my/file")'. ts(2339)

Bagaimana saya memperbaiki ini?

Jawaban #1

Pada versi 8.0.0, SDK Firebase mengalami perubahan signifikan dalam cara menangani ekspor:

Perubahan besar: field browser dalam file package.json sekarang mengarah ke bundle ESM alih-alih bundle CJS. Pengguna yang menggunakan impor ESM sekarang harus menggunakan impor default alih-alih impor namespace.

Sebelum 8.0.0

import * as firebase from 'firebase/app'

Setelah 8.0.0

import firebase from 'firebase/app'

Kode yang menggunakan require('firebase/app') atau require('firebase') akan tetap berfungsi, tetapi untuk mendapatkan pengetikan yang tepat (untuk penyelesaian kode, misalnya) pengguna sebaiknya mengubah panggilan require ini menjadi require('firebase/app').default atau require('firebase').default. Hal ini karena SDK sekarang menggunakan pengetikan untuk bundle ESM, dan bundle yang berbeda berbagi satu file pengetikan.

Jadi, Anda harus menggunakan ekspor default bundel ESM baru:

import firebase from "firebase/app"
firebase.initializeApp({ ... })

Jika Anda bekerja dengan versi SDK 9.0, baca pertanyaan ini sebagai gantinya:

  • Bagaimana cara memperbaiki kesalahan impor Firebase 9.0? "Kesalahan impor yang dicoba: 'firebase/app' tidak mengandung ekspor default (diimpor sebagai 'firebase')."

Jawaban #2

cara lama untuk mengimpor firebase : import * as firebase dari "firebase/app";

Cara baru untuk mengimpor di versi 8.0.0: import firebase dari "firebase/app"

misalnya: cara saya melakukannya. Hanya 2 baris pertama yang relevan, baris lainnya hanya ditambahkan sebagai bagian dari kode saya tapi sebenarnya cukup umum!

import firebase from "firebase/app"
import "firebase/auth"

const firebaseConfig = {
  apiKey: XXXX,
  authDomain: XXX,
  projectId: XXXX,
  storageBucket: XXXX,
  messagingSenderId: XXXX,
  appId: XXXX,
}


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


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

ganti XXXX dengan data kamu, hanya ingin memastikan :)

Artikel terkait