En la versión 8.0.0 , el SDK de Firebase tuvo un cambio importante en la forma en que maneja las exportaciones:

Cambio importante: los campos del browser en los archivos package.json ahora apuntan a paquetes ESM en lugar de paquetes CJS. Los usuarios que usan importaciones de ESM ahora deben usar la importación predeterminada en lugar de una importación de espacio de nombres.

Antes de 8.0.0

 import * as firebase from 'firebase/app'

Después de 8.0.0

 import firebase from 'firebase/app'

El código que usa require('firebase/app') o require('firebase') seguirá funcionando, pero para obtener las tipificaciones adecuadas (para completar el código, por ejemplo), los usuarios deben cambiar estas llamadas require a require('firebase/app').default o require('firebase').default . Esto se debe a que el SDK ahora usa tipos para el paquete ESM y los diferentes paquetes comparten un archivo de tipos.

Por lo tanto, deberá utilizar la exportación predeterminada del nuevo paquete ESM:

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

Si está trabajando con SDK versión 9.0 , lea esta pregunta en su lugar:

• ¿Cómo soluciono un error de importación de Firebase 9.0? "Intento de error de importación: 'firebase/app' no contiene una exportación predeterminada (importada como 'firebase')".

Es un problema de actualización, aunque puede arreglar cómo importa Firebase, no puede arreglar cómo se importa en las bibliotecas que usa, tendrá que esperar a que se actualice esa biblioteca.

Antes de la importación 8.0.0 * como firebase desde 'firebase/app'

Después de 8.0.0, importa firebase desde 'firebase/app'

Las bibliotecas como la autenticación de FirebaseUI no se han actualizado, y he estado esperando la actualización de FirebaseUI desde abril

https://stackoverflow.com/a/66708552/12490386

intente usar esto para firebase 9 arriba

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

o puede leer más en: https://firebase.google.com/docs/web/modular-upgrade

Estas son las nuevas actualizaciones de Firebase 9:

 import { initializeApp } from "firebase/app"; import { getMessaging, getToken } from "firebase/messaging";

Enfrenté un problema similar al intentar usar la autenticación de Firebase en un sitio antiguo.

Esto resolvió el problema:

 npm uninstall firebase step npm install firebase

consejo de mis propios errores: asegúrese de que todas las ortografías sean correctas e intente usar este 😁 import firebase from 'firebase'

forma antigua de importar firebase: importar * como firebase desde "firebase/app";

Nueva forma de importar en la versión 8.0.0: importar firebase desde "firebase/app"

por ejemplo: la forma en que lo hice. Solo las primeras 2 líneas son relevantes, las otras líneas solo se agregan como parte de mi código, ¡pero es bastante general tbh!

 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()

reemplace XXXX por sus datos, solo quede claro :)

Si está utilizando autenticación, debe importar por separado como: import 'firebase/auth'; Como no está importando todo como '* como base de fuego'.

La versión 9 proporciona un conjunto de paquetes de compatibilidad que son compatibles con API con la versión 8. Están destinados a facilitar la actualización a la API modular al permitirle actualizar su aplicación pieza por pieza. Consulte la Guía de actualización para obtener más detalles.

Para acceder a los paquetes de compatibilidad, use la subruta de compatibilidad de la siguiente manera:

// Los paquetes compatibles con v9 son compatibles con API con el código v8

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

Resolví un problema similar para la versión de base de fuego> 9, usando en la ruta: /compat/ Por ejemplo: import firebase from "firebase/compat/app";

Actualización 2021:

Firebase v9 viene con una nueva API diseñada para facilitar la sacudida de árboles (eliminación de código no utilizado). Esto hará que su aplicación web sea lo más pequeña y rápida posible.

Los paquetes /compat se crean por motivos de compatibilidad y para facilitar la actualización a la API modular. Con la desventaja de no obtener las ventajas de rendimiento. Para obtener los beneficios de rendimiento del diseño modular, use getApps en su lugar:

 import { getApps, initializeApp } from 'firebase/app'; if (!getApps().length) { initializeApp({ // your config }); }

Desde el JSDoc de la biblioteca: getApps devuelve A (read-only) array of all initialized apps. .

También hay una función getApp que, When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.

Resolví mi problema usando este tipo de enfoque de 'importación' en firebase versión 9.6.1:

 import "firebase/auth" import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: "AIzaSyBbaKxbqufRCfrwGpQ3sfuBgIifIhTCP1A", authDomain: "facebook-clone-f4994.firebaseapp.com", projectId: "facebook-clone-f4994", storageBucket: "facebook-clone-f4994.appspot.com", messagingSenderId: "593047789391", appId: "1:593047789391:web:11459d7b291b9465542f3a", measurementId: "G-FNW1K23DBJ" }; const firebaseApp = firebase.initializeApp(firebaseConfig); const db = firebaseApp.firestore(); const auth = firebase.auth(); const provider = new firebase.auth.GoogleAuthProvider(); export { auth, provider }; export default db;