Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

StyledFirebaseAuth not working with nextjs

Open
#180 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
30/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
firebase, nextjs, react, typescript
Domain
authentication, frontend, web-dev

Research direction

Start with node_modules/react-firebaseui/FirebaseAuth.js and the shown login TSX file, then reproduce both errors with next dev. Done means the Next.js app compiles without the CSS and package-export errors and the login page renders.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
1.3k
Forks
246
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from firebase/firebaseui-web-react

All issues in firebase/firebaseui-web-react

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.