Chakra UI v3 v2 Downgrade: Errors I Got Stuck On and How I Fixed Them

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)