foreign-sapphire
foreign-sapphire17mo ago

Compile error next-auth

Generated project: Nextjs + Ant Design+ Hasura + Auth0. Unzipped, npm install, npm run dev and failed to compile. Some workeround seems to be add next-auth package to list of transpilePackages in next.config.js but I'm not sure if it's expected behaviour. anyway it will compile but then throws an error :
Unhandled Runtime Error
Error: React Context is unavailable in Server Components
Call Stack
SessionProvider
node_modules/next-auth/react/index.js (451:10)
Unhandled Runtime Error
Error: React Context is unavailable in Server Components
Call Stack
SessionProvider
node_modules/next-auth/react/index.js (451:10)
I've tried also with GoogleAuth, ChakraUI... this same. Only working solution was without authorisation (without next-auth) I'm on Mac, node v19.9, npm 9.6.3.
No description
15 Replies
kapa.ai
kapa.ai17mo ago
Hi @pshemo_s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai17mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation and examples for more information: - Next.js documentation in refine (https://refine.dev/docs/packages/documentation/routers/nextjs/) - NextAuth - Google And GitHub Authentications for Nextjs (https://refine.dev/blog/nextauth-google-github-authentication-nextjs) These resources might help you find a solution to your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Next.js | refine
refine provides router bindings and utilities for Next.js. This package will provide easy integration between refine and Next.js for both existing projects and new projects without giving up the benefits of Next.js.
NextAuth - Google And GitHub Authentications for Nextjs | refine
How to implement Google and GitHub authentications using NextAuth.js in Next.js?
kapa.ai
kapa.ai17mo ago
<@682280607295733905> kapa.ai is still learning and improving, please let us how it did by reacting below
variable-lime
variable-lime17mo ago
1 month ago, antd was throwing error like this, we solve that problem adding antd to transpilePackages. then antd solve that issue. No longer nessecersy to add antd to transpilePackages. i mean, it's totally okay to add next-auth to transpilePackages. i will debug and check issues on next-auth repository after that i will inform you with more detail. Meanwhile i believe you can continue to develop with transpilePackages
foreign-sapphire
foreign-sapphire17mo ago
Actually it only solve the compilation issue. Then I stuck on the issue with SessionProvider mentioned above:
foreign-sapphire
foreign-sapphire17mo ago
No description
foreign-sapphire
foreign-sapphire17mo ago
I have no idea what wrong with my configured project, as I belive more people generate such project and I didn't found any mention about such issue ;-). Unfortunatelly it's a blocker for me to go forward as I'm unable to run authorisation in my project 😦
variable-lime
variable-lime17mo ago
I need to debug more to understand issue. can you provide me your project ? any github, codesandbox or any zip file its okay
foreign-sapphire
foreign-sapphire17mo ago
Yes, sure. It's downloaded from here https://refine.new/api/.refine/d/Mm7jaXUdW4ROc4d
variable-lime
variable-lime17mo ago
hmm. i did open the project on development and production build. what steps should i follow to the reproduce this error ?
foreign-sapphire
foreign-sapphire17mo ago
'npm install' 'npm run dev' Just regular as recommended, nothing changed, clean install Which node version are you running? Seems that the root cause is in next-auth module combined with OSX environment. "next-auth": 4.20.0 - works without any issues ^4.21.0" - fail with errors mentioned above
variable-lime
variable-lime17mo ago
System: - OS: macOS 13.2.1 - CPU: (8) arm64 Apple M1 Pro Binaries: - Node: 18.5.0 - ~/.nvm/versions/node/v18.5.0/bin/node - Yarn: 1.22.17 - /opt/homebrew/bin/yarn - npm: 8.12.1 - ~/.nvm/versions/node/v18.5.0/bin/npm Browsers: - Chrome: 114.0.5735.90 - Firefox: Not Found - Safari: 16.3 this have version "next-auth": "^4.20.1", you can try 4.22.1 (latest)
foreign-sapphire
foreign-sapphire17mo ago
I've also tried the 4.22.1 (latest) - unfortunately it failed:-( I'll stick now to 4.20 to go forward with development and check later again on staging environment. Thx for your help and effort - it saved me hours as you were able to run it on your environment (let me focus on checking dependences) 👌🤝😊
variable-lime
variable-lime17mo ago
i'm happy to help but @pshemo_s I did install 4.22.1 and its works as expected. i couldn't reproduced the issue on this example https://refine.new/api/.refine/d/Mm7jaXUdW4ROc4d 😕
foreign-sapphire
foreign-sapphire17mo ago
I guess it's something strongly related to my environment (Mac architecture, OS related ...). I have not yet any idea what, but...workaround works now 😎