Así que estoy usando ChakraUI y React JS para hacer un proyecto. Cada vez que inicio el proyecto, aparece el error "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'useSystemColorMode')".
No edité ningún tema global ni nada en chakra. Acabo de empezar a hacer la barra de navegación, diseñada con CSS. Y cuando trato de ejecutarlo, me muestra el error. aquí está mi componente de barra de navegación
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;Archivo CSS de la barra de navegación
.NavbarItems { height: 80px; display: flex; justify-content: center; }archivo app.js
import { ChakraProvider } from "@chakra-ui/provider"; import Navbar from "./components/navbar"; function App() { return ( <ChakraProvider> <Navbar /> </ChakraProvider> ); } export default App;Básicamente, este es un problema con el tema ChakraUI, aunque no hice nada con el tema ChakraUI ni nada. Agregué el archivo theme.js que incluía lo siguiente:
// 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;luego incluí lo siguiente en el archivo index.js:
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") );Y funcionó. Si alguien tiene el mismo problema, puede consultar https://chakra-ui.com/docs/features/color-mode .
Una vez que usé extendTheme en lugar de un objeto para el tema, el error desapareció. https://chakra-ui.com/docs/theming/customize-theme