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

Kazutora Hattori · 2025-09-04T08:37:41+0100

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

Code:

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

2. Install React 18

Code:

npm install react@18 react-dom@18

3. Install Chakra UI v2 & Required Dependencies

Code:

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

4. Set up main.tsx

Code:

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

Code:

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.

Continue reading...

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

Kazutora Hattori

Guest

Introduction​

Problem​

Solution​

1. Remove existing dependencies​

2. Install React 18​

3. Install Chakra UI v2 & Required Dependencies​

4. Set up main.tsx​

5. Check App.tsx​

Conclusion​

Introduction

Problem

Solution

1. Remove existing dependencies

2. Install React 18

3. Install Chakra UI v2 & Required Dependencies

4. Set up main.tsx

5. Check App.tsx

Conclusion