はじめに
Vite + React + Chakra UI + Supabase で学習記録アプリを作っていたら、いろいろエラーにハマりました。
特に Chakra UI v3 と v2 の違いで混乱したので、解決手順を残しておきます。
問題(1つ目のエラー)
Chakra UI を導入して Button コンポーネントを画面に表示させようとしたところ、以下のエラーが発生した。(Tbody が見つからないエラー)
Uncaught SyntaxError: The requested module '@chakra-ui/react' does not provide an export named 'Tbody'
解決方法
互換性重視で v2 にダウングレード
npm uninstall @chakra-ui/react
npm install @chakra-ui/react@2.8.2 @emotion/react @emotion/styled framer-motion
問題(2つ目のエラー)
Uncaught SyntaxError: The requested module '@chakra-ui/react' does not provide an export named 'ClientOnly'
解決方法
src/components/color-mode.tsx を削除
または
import { ClientOnly } from "@chakra-ui/react"; を削除
おわりに
Chakra UI v3 と v2 は API が大きく違う ので、教材や記事を参考にする場合はバージョンを揃えることが大事。