🍏

【Supabase】ThemeSupaをインポートできなかった話

2023/03/02に公開
2

「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