Question 412437 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

Tags:

2

Answers


  1. 0

    I was just facing this issue as well, According to https://github.com/chakra-ui/chakra-ui following is the syntax that is working

    import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}

    apparently we have to import defaultSystem from chakra-ui & pass it to ChakraProvider

    https://github.com/chakra-ui/chakra-ui?tab=readme-ov-file#usage

    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search