ChakraUi/nodejs undefined (reading '_config')

Question

I am new to the chakraUi, I have installed latest npm and chakraUi version. Whenver I try to run my code it gives me this error

Uncaught TypeError: Cannot read properties of undefined (reading '_config') at ChakraProvider (provider.js:15:10) at renderWithHooks (react-dom.development.js:15486:18) at mountIndeterminateComponent (react-dom.development.js:20103:13) at beginWork (react-dom.development.js:21626:16) at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27490:7) at performUnitOfWork (react-dom.development.js:26596:12) at workLoopSync (react-dom.development.js:26505:5)`

Here is my code:

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <BrowserRouter>
    <ChakraProvider>
      <App />
    </ChakraProvider>
    </BrowserRouter>
  </React.StrictMode>
);

// App.jsx 
function App() {
    return (
        <h1>Hi</h1>
    );
}

Any leads will be greatly appreciated!!!

Answer 1

Maybe the Chakra-ui haven't updated their Docs.

I fixed it for a while. Below is my answer.

import { ChakraProvider, defaultSystem } from "@chakra-ui/react";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <ChakraProvider value={defaultSystem}>
      <App />
    </ChakraProvider>
  </StrictMode>
);

The key point is the add value as the defaultSystem. I used the latest version.