はじめに

業務でReactを初めて扱うことになったので、JISOの方のハンズオン動画を参考にキャッチアップをすることにしました

動画は以下
https://www.youtube.com/watch?v=_S--bTdPezU

その中でChakra UIを利用するステップがあったのですが、動画の手順ではうまく行かなかったので記事にしてみました

開発環境

カテゴリ	ソフトウェア名	バージョン
OS	Windows	11
プログラミング言語	TypeScript	5.6.3
ライブラリ	react	18.3.1
ライブラリ	chakra-ui\react	3.3.1
ビルドツール	vite	6.0.7

問題

動画の開始からちょうど25分たった際に、Chakra UIを利用するためのコンポーネントであるChakraProviderを追加していました。実際のコードが以下になります。

App.tsx

import { ChakraProvider } from "@chakra-ui/react"
import { Title } from "./Title"

function App() {
  return (
    <ChakraProvider>
      <div>
        <Title />
        <Title />
        <Title />
      </div>
    </ ChakraProvider>
  )
}

export default App

この時、表題にも記載した内容をVSCodeから警告されました

プロパティ 'value' は型 '{ children: Element; }' にありませんが、型 'ChakraProviderProps' では必須です。
provider.d.ts(4, 5): 'value' はここで宣言されています。

原因

Chakra UI V3が2024年10月にリリースされたらしく、そのアップデートに伴いChakraProviderの扱いが変わったようです。

実際にChakraProviderの参照元を見てみると、引数としてChakraProviderProps型のパラメータを必要としていることがわかります。

node_modules@chakra-ui\react\dist\types\styled-system\provider.d.ts

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値にChakra UI側が提供しているdefaultSystemを渡してあげればいいようです。
defaultという名前なのだから、省略させてほしいですね。。。

App.tsx

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

function App() {
  return (
    <ChakraProvider value={defaultSystem} >
      <div>
        <Title />
        <Title />
        <Title />
      </div>
    </ChakraProvider>
  )
}

export default App

参考

同一事象の記事

defaultSystemについての記載