React 19 + Chakra UI で「ChakraProvider の _config エラー」が出たときの解決法

はじめに

Chakra UI を導入して Button を表示しようとしたところ、以下のエラーが発生したのでまとめます。

問題

Chakra UI を導入して Button を画面に表示させようとしたところ、以下のエラーが発生した

Uncaught TypeError: Cannot read properties of undefined (reading '_config')
at ChakraProvider

解決方法

1. 既存の依存関係を削除

npm uninstall react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. React 18 をインストール

npm install react@18 react-dom@18

3. Chakra UI v2 & 必要な依存をインストール

npm install @chakra-ui/react@2 @emotion/react@11 @emotion/styled@11 framer-motion@10

4. main.tsx を設定

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { ChakraProvider } from '@chakra-ui/react'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </StrictMode>,
)

5. App.tsx を確認

import { Button } from '@chakra-ui/react'

function App() {
  return (
    <Button colorScheme="teal">Button</Button>
  )
}

export default App

---

おわりに

つまり、バージョンの不整合が原因で _config エラーが発生していました。
新しいバージョンを入れるときは 依存関係の対応表を必ず確認。