🍏
【Supabase】ThemeSupaをインポートできなかった話
「Supabaseよさそう!これ使ってアプリ作ろ!」と意気込んでいた矢先、その問題は発生しました。
2023年3月3日追記: コメント欄の通り、公式様が対応してくださいました! ありがとうございます!!
発生した問題
// ref: https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
import {
Auth,
// Import predefined theme
ThemeSupa,
} from '@supabase/auth-ui-react'
const supabase = createClient(
'<INSERT PROJECT URL>',
'<INSERT PROJECT ANON API KEY>'
)
const App = () => (
<Auth
supabaseClient={supabase}
{/* Apply predefined theme */}
appearance={{ theme: ThemeSupa }}
/>
)
Auth
コンポーネントに、Supabaseで用意してくれているテーマThemeSupa
をドキュメント通りインポートしようすると、
Module '"@supabase/auth-ui-react"' has no exported member 'ThemeSupa'.
と怒られるのでした。
(同様に@supabase/auth-ui-react
からインポートしているAuth
コンポーネントは問題なくインポートできている。謎。)
暫定的な対応
「公式のExamplesでも@supabase/auth-ui-react
からインポートできてるのかな?」とレポジトリをあさっていたところ、このコードを見つけました。
// ref: https://github.com/supabase/auth-ui/blob/main/examples/react/src/App.tsx
import styles from './App.module.css'
import { createClient } from '@supabase/supabase-js'
import { SocialLayout, ThemeSupa } from '@supabase/auth-ui-shared'
...
このコードを参考に、@supabase/auth-ui-shared
パッケージを追加、そこからThemeSupa
をインポートし、Auth
コンポーネントのappearance
に設定しました。
まとめ
タイトルの問題は、前述のような方法で一旦は解決できました。
しかし、公式のドキュメントに誤りがあるとはあまり考えられず、私側に問題がある可能性が高いです。
「根本的には、ここに問題があるのではないか?」
「私はこのように解決した!」
などございましたら、コメントいただければ幸いです。
Discussion
こちら記事にしてくださってありがとうございます!公式のガイドの間違いみたいなので修正いたしますね!
ありがとうございます!!
この記事も修正いたします。