Solution for “ChakraProvider's _config error” in React 19 + Chakra UI

#react #help

Introduction

When I tried to display a Button after introducing Chakra UI, the following error occurred, so I'll summarize it here.

Problem

When attempting to display a Button on the screen after introducing Chakra UI, the following error occurred:

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

Solution

1. Remove existing dependencies

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

2. Install React 18

npm install react@18 react-dom@18

3. Install Chakra UI v2 & Required Dependencies

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

4. Set up 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. Check App.tsx

import { Button } from ‘@chakra-ui/react’

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

export default App

Conclusion

In short, the _config error was caused by version incompatibility.
Always check the dependency compatibility chart when installing new versions.

DEV Community