StyledFirebaseAuth not working with nextjs

[paymog]

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.

[mym1990]

@paymog I think you have to update the import statement to be 'import firebase from "firebase/compat/app" if you are running v9 of Firebase.

[SSylvain1989]

hello - did you find a solution ? @paymog

[paymog]

I actually ended moving away from the styled ui and building my own. Did you try mym1990's solution @SSylvain1989?

[SSylvain1989]

i have removed styledFirebase and put all with firebase SDK instead , easier @paymog

[derekdevv]

are you using firebase v9? if so i believe you should do something like this

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { firebaseConfig } from './firebaseApp.config';

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

then when you import the StyledFirebaseAuth, do import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

[thanhtutzaw]

How I import v9

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'; import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/auth'; import { getAuth } from 'firebase/auth';

<StyledFirebaseAuth uiConfig={firebaseAuthConfig} firebaseAuth={getAuth()} />

[aabmets]

Can we please get an updated version of this module to work with Nextjs without using Firebase compatibility modules? Next Auth is too complicated.

[MartinXPN]

You can have a look at the solution here: https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1215648239