firebase / firebase/firebaseui-web-react

StyledFirebaseAuth not working with nextjs

Abierto
#180 8 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
1.3k
Forks
246
Métricas de merge de PR
Sin PR fusionados en 30 d

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 (




)
}

export default Login
```

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

Guía de contribución

Abrir la guía de contribución

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.

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.