CODEWITHSUNDEEP
javascriptcssreactjschakra-ui
tanjim anim
tanjim anim

Reputation: 531

How to fix "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')"

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;

Upvotes: 5

Views: 9833

Answers (6)

Younis Yousaf
Younis Yousaf

Reputation: 1

  1. import the system from @chakra-ui/react/preset
  2. Pass it in the wrapper

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App.jsx";
import { system } from "@chakra-ui/react/preset";

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

Upvotes: 0

Adeniyi Segun
Adeniyi Segun

Reputation: 31

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider} from "@chakra-ui/react";
import "./index.css";
import App from "./App.jsx";
//import system here below
import { system } from "@chakra-ui/react/preset";

createRoot(document.getElementById("root")).render(
  <StrictMode>
{/* and pass value system below*/}
    <ChakraProvider value={system}> 
      <App />
    </ChakraProvider>
  </StrictMode>
);

Upvotes: 2

kartik thakur
kartik thakur

Reputation: 1

I think by adding value={defaultSystem} in ChakraProvider will fix it.Because it needs value initially. <ChakraProvider value={defaultSystem}> </ChakraProvider>. It worked for me:)

Upvotes: 0

Adio Azeez
Adio Azeez

Reputation: 21

The first thing you should do is to check the name of the message type (error, success, warning) if you misspell it, the error will occure

Upvotes: 0

HiLuLiT
HiLuLiT

Reputation: 553

Once I used extendTheme instead of an object for theme the error was gone. https://chakra-ui.com/docs/theming/customize-theme

Upvotes: 0

tanjim anim
tanjim anim

Reputation: 531

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.

Upvotes: 2

Related Questions