英文:
Supabase Auth-UI Issue: Uncaught TypeError: Cannot read properties of null (reading 'useState')
问题
以下是翻译好的部分：
问题
每次我在我的登录页面中添加这个 Auth（这是一个组件），我都会遇到问题。我试图遵循关于 Supabase Auth 与 Next.js 页面目录 的文档。如果你们认为这是一个版本问题，请告诉我。我一直在尝试在互联网上搜索这个问题，但没有找到与 auth-ui 相关的问题，但我认为这个问题是来自 Auth 的，因为只有在我添加它的时候才会发生。
代码
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useTheme } from 'next-themes'
import { Database } from '../../types/database.types'
export default function AuthForm() {
const supabase = createClientComponentClient<Database>()
const { theme } = useTheme();
return (
<Auth
supabaseClient={supabase}
appearance={{ theme: ThemeSupa }}
socialLayout="horizontal"
onlyThirdPartyProviders={true}
theme={theme === 'dark' ? 'light' : 'dark'}
showLinks={false}
providers={['google', 'twitter', 'discord']}
redirectTo="http://localhost:3000/api/auth/callback"
/>
)
}
演示
包 / 依赖项
"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
"next": "^12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
视图
英文:
Issue
Everytime I add this Auth (this is a component) in my login page i am having issue, I am trying to follow the docs about Supabase Auth with Next.js Pages Directory. If you guys think this is a version issue please let me know. Been trying to search this issue on internet but haven't found related to auth-ui but i do think that this issue is from Auth since it only happens everytime i add this.
Code
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useTheme } from 'next-themes'
import { Database } from '../../types/database.types'
export default function AuthForm() {
const supabase = createClientComponentClient<Database>()
const { theme } = useTheme();
return (
<Auth
supabaseClient={supabase}
appearance={{ theme: ThemeSupa }}
socialLayout="horizontal"
onlyThirdPartyProviders={true}
theme={theme === 'dark' ? 'light' : 'dark'}
showLinks={false}
providers={['google', 'twitter', 'discord']}
redirectTo="http://localhost:3000/api/auth/callback"
/>
)
}
Demo
Packages / Dependencies
"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
"next": "^12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
Views
<img src="https://profile-counter.glitch.me/76681113-supabase-auth-ui-issue-uncaught-typeerror-cannot-read-properties-of-null-read/count.svg" />
答案1
得分: 0
问题在于兼容性。所以我决定进行更新：
"react": "18.2.0",
"react-dom": "18.2.0",
"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
英文:
The issue is the compatibility. So i have decided to update:
"react": "18.2.0",
"react-dom": "18.2.0",
"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论