compile the library to remove the reference of CSS files from node_modules

[raajnadar]

When we use this library with the latest version of Next.Js this error is thrown.

CSS Imported by a Dependency
Why This Error Occurred
One of your dependencies (node_modules) imports a CSS file.

This normally happens when a package's source files are accidentally consumed, instead of the built package.

Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

Importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

Should the file be consumed as Global CSS or CSS Modules?
If Global, in what order does the file need to be injected?
If Modules, what are the emitted class names? As-is, camel-case, snake case?

https://github.com/zeit/next.js/blob/master/errors/css-npm.md

Can we get a quick fix for this issue??

[DavidLemayian]

@raajnadar Here's suggested implementation for Firebase by Next.js team - https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

[zackdotcomputer]

That suggested implementation has been removed and instead points to this package, which adds in a lot of features if you need clientside and serverside auth support.

If you're using Next.js for firebase hosting and are just going to output static files, though, they advise you not use it because it's overkill...

So I just undertook rewriting the FirebaseAuth file so that anyone in the future who is trying to do this and finds this issue can drop this version of the component into their Next.js project instead:

Next.js compatible Firebase Auth Button

[masibw]

If you import like this, error occured

import { StyledFirebaseAuth } from 'react-firebaseui'

You should write as

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'

[DanielBailey-web]

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'

Why does this work?