Global CSS cannot be imported from within node_modules.

[Fahad67]

When I import the library I got the css error. Kindly anyone help to resolve this issue. I am using nextJs

./node_modules/react-apple-signin-auth/dist/AppleSigninButton/AppleSigninButton.css

[a-tokyo]

What does the error say? @Fahad67

Can you replicate in a repo with a simple nextJS app?

[victufell]

I have the same problem in my React project

[victufell]

did you manage to solve? @Fahad67

[Fahad67]

@victufell No, I just use alternative because shortage of the time.

[Fahad67]

@A-Tokyo It was css importing error while importing library in any component.

[a-tokyo]

@victufell @Fahad67 Can you provide a way to reproduce? Is it create react app? If so which version?

[skoppers]

@A-Tokyo I provided a repo for you where you can reproduce the issue: https://github.com/skoppers/apple-sign-in-next-example

In the error message, nextjs mentions to "Reach out to the maintainer and ask for them to publish a compiled version of their dependency." https://github.com/vercel/next.js/blob/master/errors/css-npm.md

Currently a work around is to comment require("./AppleSigninButton.css"); in AppleSignInButton.js, followed by importing the css in the _app.js page like so: import '../node_modules/react-apple-signin-auth/dist/AppleSigninButton/AppleSigninButton.css'

Lastly, since the library only works on the client side, you need to dynamically import it so that it is not used in server side rendering:

import dynamic from 'next/dynamic'

const AppleSignin = dynamic(
  () => import('react-apple-signin-auth'),
  { ssr: false }
)

[a-tokyo]

Fixed here https://github.com/A-Tokyo/react-apple-signin-auth/pull/27 will be auto released in a bit as "0.0.8"