a-tokyo / react-apple-signin-auth

 Apple signin for React using the official Apple JS SDK

Home Page:https://a-tokyo.github.io/react-apple-signin-auth

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Global CSS cannot be imported from within node_modules.

Fahad67 opened this issue · comments

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

What does the error say? @Fahad67

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

I have the same problem in my React project

image

did you manage to solve? @Fahad67

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

@a-tokyo It was css importing error while importing library in any component.

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

@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 }
)

Fixed here #27 will be auto released in a bit as "0.0.8"