javascriptreactjsasp.netvitechakra-ui

Uncaught TypeError: sys is undefined when using Chakra UI with Vite

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.

Solution

  • 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