はじめに

Chakra UI Ver3.33.0をアプリ開発時に導入した結果エラーがおこりました。

問題

アプリ開発にあたりChakra UI Ver3.33.0を導入することになりました。
そのさい、以下のコードを作成しました。

App

import "./styles.css";
import { Button, ChakraProvider } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <ChakraProvider>
        <Button>ボタン</Button>
      </ChakraProvider>
    </div>
  );
}

Property 'value' is missing in type '{ children: Element; }' but required in type 'ChakraProviderProps'.typescript(2741)

解決方法

エラー文を確認するとvalue値がないと表示されていました。
ChakraProviderの参照元を見てみると、引数としてChakraProviderProps型のパラメータを必要としていることがわかります。

provider.d

import type { SystemContext } from "./types";
declare const useChakraContext: () => SystemContext;
export interface ChakraProviderProps {
    value: SystemContext;
    children: React.ReactNode;
}
declare function ChakraProvider(props: ChakraProviderProps): import("react/jsx-runtime").JSX.Element;
export { ChakraProvider, useChakraContext };

value値の記載を行いました。
エラーは解消されました。

App

import "./styles.css";
import { Button, ChakraProvider, defaultSystem } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <ChakraProvider value={defaultSystem}>
        <Button>ボタン</Button>
      </ChakraProvider>
    </div>
  );
}

おわりに

Ver管理は大変です。

参考