Olá Pessoal, tudo bem? Espero que todos estejam bem. Hoje estou implementando o Firebase no meu aplicativo Mas estou enfrentando o seguinte erro Tentativa de erro de importação: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’) dentro ReactJs. Então aqui estou eu explicar a você todas as soluções possíveis aqui.

Sem perder seu tempo, vamos começar este artigo para resolver este erro.

Como Tentativa de erro de importação: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’) Ocorre um erro?

Hoje estou implementando o Firebase no meu aplicativo Mas estou enfrentando o seguinte erro.

./src/firebase.js Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

Aqui está o meu código.

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

Como resolver o erro de importação tentado: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’) Erro?

  1. Como resolver o erro de importação tentado: ‘firebase/app’ não contém um erro de exportação padrão (importado como ‘firebase’)?

    Para resolver o erro de importação tentado: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’) Erro Se você estiver usando a versão 9, não esqueça que as coisas mudaram um pouco para importar o firebase Agora há um compatibility então pode usar a pasta /compat em suas importações. Aqui está um exemplo Substituir esta linha. importar o Firebase de firebase/app; Com This import firebase from ‘firebase/compat/app’; a segunda solução é se você estiver enfrentando esse erro, faça o downgrade para qualquer uma das versões do Firebase inferiores à v9.

  2. Tentativa de erro de importação: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’)

    Para resolver o erro de importação tentado: ‘firebase/app’ não contém uma exportação padrão (importada como ‘firebase’) Erro Se você estiver usando a versão 9, não esqueça que as coisas mudaram um pouco para importar o firebase Agora há um compatibility então pode usar a pasta /compat em suas importações. Aqui está um exemplo Substituir esta linha. importar o Firebase de firebase/app; Com This import firebase from ‘firebase/compat/app’; a segunda solução é se você estiver enfrentando esse erro, faça o downgrade para qualquer uma das versões do Firebase inferiores à v9.

Solução 1: use a pasta /compat nas importações

Se você estiver usando a versão 9, não esqueça que as coisas mudaram um pouco para importar o firebase. compatibility então pode usar o /compat pasta em suas importações. Aqui está um exemplo.

Substituir esta linha.

import firebase from "firebase/app";

Com isso.

import firebase from 'firebase/compat/app';

Aqui está um exemplo que foi alterado na versão 9

//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

Solução 2: fazer downgrade da versão do Firebase

Se você estiver enfrentando esse erro, faça o downgrade para qualquer uma das versões do Firebase inferiores à v9.

Solução 3: crie um objeto do aplicativo Firebase Como exemplo abaixo

  1. Instale o Firebase usando npm.
  2. npm instala firebase
  3. Inicialize o Firebase em seu aplicativo e crie um objeto Firebase App Como este exemplo abaixo.
import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project
configuration const firebaseConfig = {   //... };

const app = initializeApp(firebaseConfig);

verão

É tudo sobre esta questão. Espero que toda a solução tenha ajudado muito. Comente abaixo Seus pensamentos e suas dúvidas. Além disso, comente abaixo qual solução funcionou para você?