0

Tengo un problema que se presenta al usar firebase junto a react, me dice que no encuentra el modulo, pero yo lo tengo bien instalado, el archivo donde tengo instalado las credenciales de firebase es:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { firebase } from 'firebase/app';
import 'firebase/auth'


const firebaseConfig = {
  apiKey: "x",
  authDomain: "x-x.x.com",
  projectId: "x-x",
  storageBucket: "x-x.x.com",
  messagingSenderId: "x",
  appId: "1:x:web:x",
  measurementId: "G-x"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const auth = app.auth();

export { auth }

Luego llamo al archivo desde login.jsx

import React from 'react'
import '../css/login.css'
import {auth} from '../firebaseconfig' // <--- aca
const Login = () => {
    return (
        <div>
            <form action="">

            <input type="text"  placeholder="Email"/>
            <input type="password" name="" id="" placeholder="********"/>
            <input type="submit" value="Enviar" />
            </form>
        </div>
    )
}

export default Login

No entiendo que es lo que tengo mal instalado, ya he hecho varias cosas e investige por todos lados pero no encuentro la solucion, este es el tercer trabajo con firebase que me pasa y tengo que borrar para comenzar otro pero no encuentro donde esta el problema.

este es el error:

introducir la descripción de la imagen aquí

Ya borre varias veces "yarn.lock" y tambien he reinstalado firebase en distintas versiones, agradezco toda su ayuda de ante mano.

2
  • 1
    Hola, no creo que esto amerite una repuesta completa ya que deben de haber miles ya que es un problema muy simple pero basicamente lo que pasa es que el modulo de firebase no tiene ningun named export que se llame firebase, no recuerdo si exporta otros nombre pero lo que es seguro es que exporta default, asi que pasa solucionalrlo en lugar de import { firebase } from 'firebase/app' haz esto import firebase from 'firebase/app' o si quieres ponerle otro nombre import { default as otronombre } from 'firebase/app' Commented el 2 sept. 2021 a las 18:03
  • 1
    Elimina los dos ultimos imports y agrega este import { getAuth } from "firebase/auth"; Luego define la constante así const auth = getAuth(app); Commented el 2 sept. 2021 a las 20:08

3 respuestas 3

2

Me acaba de pasar lo mismo. Parece que hay problemas según la versión de firebase que tengas. Yo estaba importando como si tuviese la versión 8 o inferior. Pero con la versión 9 y según la documentación cambia un poco.

// Por ejemplo en la versión 8 para crear un usuario con auth era así.

import firebase from "firebase";
const firebaseConfig = {
  // ...
}
const firebaseApp = firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
export { auth }

// Para la versión 9 y supongo que en adelante es así.

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

const firebaseConfig = {
  // ...

const firebaseApp = firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
export { auth }

Espero que os ayude es mi primera interacción en stackoverflow. Yo ahora mismo lo tengo así y está funcionando.

4
  • Bienvenido a Stack Overflow en español gracias por ayudar a esta comunidad. pero tu respuesta parece mas bien un comentario, dale un vistazo al siguiente contenido Cómo responder un saludo.
    – rpaillao
    Commented el 7 sept. 2021 a las 11:15
  • Por favor, proporciona detalles adicionales en tu respuesta. Tal como está escrita actualmente, es difícil entender tu solución.
    – Comunidad Bot
    Commented el 7 sept. 2021 a las 11:15
  • No entiendo, estas sugiriendo que modifique la version de firebase? Commented el 7 sept. 2021 a las 16:41
  • Buenas Hatori, he vuelto a editar mi contribución, era la primera contribución y no sabía cómo poner el código. Commented el 9 sept. 2021 a las 9:17
1

Parece que tus importaciones están mal. Si miras la documentación oficial de Firebase, los import se hacen de manera diferente:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
1
  • 4
    Gracias por contribuir, por favor agrega lo esencial del enlace, revisa Cómo responder y edita tu publicación, saludos.
    – Jorgesys
    Commented el 2 sept. 2021 a las 23:08
0

muy bien la respuesta de SerjLafleur

// Para la versión 9 y supongo que en adelante es así.

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

   const firebaseConfig = {
  // ...

   const firebaseApp = firebase.initializeApp(firebaseConfig)
   const auth = firebase.auth()
   export { auth }

esta es la correcta por que estas trabajando con la version 9 de firebase ya lo comprobé y esta funcionando muy bien

Gracias compañeros

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.