So I am using ChakraUI and React JS to make a project. Whenever I start the project it gives me the error, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')".
I didn't edit any global theme or anything in chakra. I just started making the navbar, designed with CSS. And when I try to run it, it shows me the error.
here is my navbar component
import React from "react";
import { MenuItems } from "./MenuItems";
import "./navbar.css";
function Navbar() {
return (
<>
<nav className='NavbarItems'>
<h1 className='navbar-logo'></h1>
<div className='menu-icon'></div>
<ul>
{MenuItems.map((item, index) => {
return (
<li key={index}>
<a className={item.cname} href={item.url}>
{item.title}
</a>
</li>
);
})}
</ul>
</nav>
</>
);
}
export default Navbar;
Navbar CSS file
.NavbarItems {
height: 80px;
display: flex;
justify-content: center;
}
App.js file
import { ChakraProvider } from "@chakra-ui/provider";
import Navbar from "./components/navbar";
function App() {
return (
<ChakraProvider>
<Navbar />
</ChakraProvider>
);
}
export default App;
So basically this is a problem with ChakraUI theme,even though I did not do anything with ChakraUI theme or whatsoever. I added theme.js file which included the following:
// theme.js
// 1. import `extendTheme` function
import { extendTheme } from "@chakra-ui/react";
// 2. Add your color mode config
const config = {
initialColorMode: "light",
useSystemColorMode: true,
};
// 3. extend the theme
const theme = extendTheme({ config });
export default theme;
then I included the following in index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ColorModeScript } from "@chakra-ui/color-mode";
import theme from "./theme";
ReactDOM.render(
<React.StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</React.StrictMode>,
document.getElementById("root")
);
And it worked. If anyone facing the same problem, you can check out https://chakra-ui.com/docs/features/color-mode.
Once I used extendTheme instead of an object for theme the error was gone. https://chakra-ui.com/docs/theming/customize-theme