Supabase Auth-UI问题：未捕获的TypeError：无法读取null的属性（读取’setState’）

huangapple
go评论121阅读模式
英文:

Supabase Auth-UI Issue: Uncaught TypeError: Cannot read properties of null (reading 'useState')

问题

以下是翻译好的部分：

问题

每次我在我的登录页面中添加这个 Auth（这是一个组件），我都会遇到问题。我试图遵循关于 Supabase Auth 与 Next.js 页面目录 的文档。如果你们认为这是一个版本问题，请告诉我。我一直在尝试在互联网上搜索这个问题，但没有找到与 auth-ui 相关的问题，但我认为这个问题是来自 Auth 的，因为只有在我添加它的时候才会发生。

代码

  1. import { Auth } from '@supabase/auth-ui-react'
  2. import { ThemeSupa } from '@supabase/auth-ui-shared'
  3. import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
  4. import { useTheme } from 'next-themes'
  5. import { Database } from '../../types/database.types'
  7. export default function AuthForm() {
  8.     const supabase = createClientComponentClient<Database>()
  9.     const { theme } = useTheme();
  11.     return ( 
  12.             <Auth
  13.             supabaseClient={supabase}
  14.             appearance={{ theme: ThemeSupa }}
  15.             socialLayout="horizontal"
  16.             onlyThirdPartyProviders={true}
  17.             theme={theme === 'dark' ? 'light' : 'dark'}
  18.             showLinks={false}
  19.             providers={['google', 'twitter', 'discord']}
  20.             redirectTo="http://localhost:3000/api/auth/callback"
  21.             />
  22.     )
  23. }

演示

Supabase Auth-UI问题：未捕获的TypeError：无法读取null的属性（读取’setState’）

包 / 依赖项

  1. "@supabase/auth-helpers-nextjs": "^0.7.2",
  2. "@supabase/auth-helpers-react": "^0.4.0",
  3. "@supabase/auth-ui-react": "^0.4.2",
  4. "@supabase/auth-ui-shared": "^0.1.6",
  5. "@supabase/supabase-js": "^2.25.0",
  6. "next": "^12.0.9",
  7. "react": "17.0.2",
  8. "react-dom": "17.0.2",

视图

Supabase Auth-UI问题：未捕获的TypeError：无法读取null的属性（读取’setState’）

英文:

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

  1. import { Auth } from &#39;@supabase/auth-ui-react&#39;
  2. import { ThemeSupa } from &#39;@supabase/auth-ui-shared&#39;
  3. import { createClientComponentClient } from &#39;@supabase/auth-helpers-nextjs&#39;
  4. import { useTheme } from &#39;next-themes&#39;
  5. import { Database } from &#39;../../types/database.types&#39;
  7. export default function AuthForm() {
  8.     const supabase = createClientComponentClient&lt;Database&gt;()
  9.     const { theme } = useTheme();
  11.     return ( 
  12.             &lt;Auth
  13.             supabaseClient={supabase}
  14.             appearance={{ theme: ThemeSupa }}
  15.             socialLayout=&quot;horizontal&quot;
  16.             onlyThirdPartyProviders={true}
  17.             theme={theme === &#39;dark&#39; ? &#39;light&#39; : &#39;dark&#39;}
  18.             showLinks={false}
  19.             providers={[&#39;google&#39;, &#39;twitter&#39;, &#39;discord&#39;]}
  20.             redirectTo=&quot;http://localhost:3000/api/auth/callback&quot;
  21.             /&gt;
  22.     )
  23. }

Demo

Supabase Auth-UI问题：未捕获的TypeError：无法读取null的属性（读取’setState’）

Packages / Dependencies

  1. &quot;@supabase/auth-helpers-nextjs&quot;: &quot;^0.7.2&quot;,
  2. &quot;@supabase/auth-helpers-react&quot;: &quot;^0.4.0&quot;,
  3. &quot;@supabase/auth-ui-react&quot;: &quot;^0.4.2&quot;,
  4. &quot;@supabase/auth-ui-shared&quot;: &quot;^0.1.6&quot;,
  5. &quot;@supabase/supabase-js&quot;: &quot;^2.25.0&quot;,
  6. &quot;next&quot;: &quot;^12.0.9&quot;,
  7. &quot;react&quot;: &quot;17.0.2&quot;,
  8. &quot;react-dom&quot;: &quot;17.0.2&quot;,

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

问题在于兼容性。所以我决定进行更新：

  1. "react": "18.2.0",
  2. "react-dom": "18.2.0",
  3. "@supabase/auth-helpers-nextjs": "^0.7.2",
  4. "@supabase/auth-helpers-react": "^0.4.0",
  5. "@supabase/auth-ui-react": "^0.4.2",
  6. "@supabase/auth-ui-shared": "^0.1.6",
  7. "@supabase/supabase-js": "^2.25.0",
英文:

The issue is the compatibility. So i have decided to update:

  1.     &quot;react&quot;: &quot;18.2.0&quot;,
  2.     &quot;react-dom&quot;: &quot;18.2.0&quot;,
  3.     &quot;@supabase/auth-helpers-nextjs&quot;: &quot;^0.7.2&quot;,
  4.     &quot;@supabase/auth-helpers-react&quot;: &quot;^0.4.0&quot;,
  5.     &quot;@supabase/auth-ui-react&quot;: &quot;^0.4.2&quot;,
  6.     &quot;@supabase/auth-ui-shared&quot;: &quot;^0.1.6&quot;,
  7.     &quot;@supabase/supabase-js&quot;: &quot;^2.25.0&quot;,

huangapple
  • 本文由 发表于 2023年7月13日 23:32:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76681113.html
  • next.js
  • reactjs
  • supabase
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定