CODEWITHSUNDEEP
javascriptreactjsvitechakra-ui
Anna Pons
Anna Pons

Reputation: 21

Uncaught TypeError: Cannot read properties of undefined (reading '_config') while using Chakra UI

I am facing an issue while trying to use Chakra UI in my React application. The following error occurs when I attempt to run the app. I am using the latest version of React and Chakra UI.

The error happens when I attempt to apply a custom theme to Chakra UI using the ChakraProvider component.

Here is my current setup:

main.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App.jsx';

const theme = {
  config: {
    useSystemColorMode: false,
    initialColorMode: 'light',
    cssVarPrefix: 'chakra',
  },
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <ChakraProvider theme={theme}>
        <App />
      </ChakraProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Any help to resolve this issue would be much appreciated!

Upvotes: 2

Views: 62

Answers (2)

Anna Pons
Anna Pons

Reputation: 21

I found that error was because I needed to have the compatible version between React/Chakra. I finally used the 18.2.2 version React and 2.8.0 Chakra version.

Upvotes: 0

Marianne
Marianne

Reputation: 161

It seems you might have forgotten to actually extend the default theme like this :

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

// You have to extend the theme when creating your own
const theme = extendTheme({
  config: {
      useSystemColorMode: false,
      initialColorMode: 'light',
      cssVarPrefix: 'chakra',
  },
})

The provider probably needs the default config first.

Upvotes: 1

Related Questions