This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
While building a study log app using Vite + React + Chakra UI + Supabase, I encountered various errors.
I was particularly confused by the differences between Chakra UI v3 and v2, so I’m documenting the steps to resolve them.
Problem (First Error)
After installing Chakra UI and attempting to display the Button component on the screen, the following error occurred. (Error: Tbody not found)
Uncaught SyntaxError: The requested module ‘@chakra-ui/react’ does not provide an export named ‘Tbody’
Solution
Downgrade to v2 for Compatibility
npm uninstall @chakra-ui/react
npm install @chakra-ui/react@2.8.2 @emotion/react @emotion/styled framer-motion
Issue (Second Error)
Uncaught SyntaxError: The requested module ‘@chakra-ui/react’ does not provide an export named ‘ClientOnly’
Solution
Delete src/components/color-mode.tsx
OR
Remove import { ClientOnly } from “@chakra-ui/react”;
Conclusion
Chakra UI v3 and v2 have significantly different APIs, so it’s crucial to use the same version when referencing tutorials or articles.
Translated with DeepL.com (free version)
This content originally appeared on DEV Community and was authored by Kazutora Hattori