Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

StyledFirebaseAuth not working with nextjs

Abierto
  • ¿Algo no está bien?
#180 8 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
firebase, nextjs, react, typescript
Área
authentication, frontend, web-dev

Línea de trabajo

Empieza con node_modules/react-firebaseui/FirebaseAuth.js y el archivo TSX de inicio de sesión mostrado; después reproduce ambos errores con next dev. Se considera terminado cuando la aplicación Next.js compila sin los errores de CSS y de exportación de paquetes, y la página de inicio de sesión se renderiza.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I'm trying to get StyledFirebaseAuth to work with NextJS but I keep running into the following issues:

in the terminal when running next dev

wait  - compiling /_error (client and server)...
error - ./node_modules/firebaseui/dist/firebaseui.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-firebaseui/FirebaseAuth.js

and in the browser

Module not found: Package path ./compat is not exported from package /Users/paymahn/code/lookieloo/node_modules/firebase (see exports field in /Users/paymahn/code/lookieloo/node_modules/firebase/package.json)
  2 | import {StyledFirebaseAuth} from "react-firebaseui";
  3 | import {auth} from "../lib/firebase";
> 4 | import firebase from "firebase/compat";
  5 | import 'firebase/compat/auth';

Here's the entire tsx file I'm using to make a login page:

import React from 'react';
import {StyledFirebaseAuth} from "react-firebaseui";
import {auth} from "../lib/firebase";
import firebase from "firebase/compat";
import 'firebase/compat/auth';

const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/',
    signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
};


const Login = () => {
    return (
        <div>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth}/>
    </div>
    )
}

export default Login

I've also tried using FirebaseAuth instead of StyledFirebaseAuth but that results in the same issue.

Lenguaje dominante
JavaScript
Estrellas
1.3k
Forks
246
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de firebase/firebaseui-web-react

Todos los issues de firebase/firebaseui-web-react

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.