I'm getting these errors when trying to integrate Chakra UI into my React application using Vite.
Uncaught TypeError: sys is undefined
ChakraProvider provider.js:15
The above error occurred in the <ChakraProvider> component:
ChakraProvider@https://localhost:5173/node_modules/.vite/deps/@chakra-ui_react.js?v=b3e29175:2973:36
This is my App.jsx, error only occurs once I add the ChakraProvider
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider } from '@chakra-ui/react';
import App from "./App.jsx";
import "./index.css";
createRoot(document.getElementById("root")).render(
<StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</StrictMode>
);
The rest of my application is just from the Visual Studio React and ASP.NET Core template and behaves without any issues.
This syntax won't work in Chakra UI v3.0.0. Not sure why. Change the version used in package.json to version 2.10.3
"@chakra-ui/react": "^2.10.3",
and reinstall with
npm i