firebase / firebase/firebaseui-web-react
StyledFirebaseAuth not working with nextjs
- 主要言語
- JavaScript
- スター
- 1.3k
- フォーク
- 246
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
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.
コントリビューションガイド
調査の方向性
node_modules/react-firebaseui/FirebaseAuth.js と、提示されているログイン用 TSX ファイルから始め、次に next dev で両方のエラーを再現します。Next.js アプリが CSS エラーとパッケージエクスポートエラーなしでコンパイルされ、ログインページがレンダリングされれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- firebase, nextjs, react, typescript
- 領域
- authentication, frontend, web-dev
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 30/100