Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

StyledFirebaseAuth not working with nextjs

See original GitHub issue

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.