Chakra UI Field.LabelでTS2322型エラー対処

はじめに

テストを書いていたら、Chakra UI でField.Labelのエラーが出ました。

問題

エラーは以下です

src/components/page/Home.tsx:50:14 - error TS2322: Type '{ children: string; htmlFor: string; }' is not assignable to type 'IntrinsicAttributes & FieldLabelProps & RefAttributes<HTMLLabelElement>'. Property 'children' does not exist on type 'IntrinsicAttributes & FieldLabelProps & RefAttributes<HTMLLabelElement>'. 50 <Field.Label htmlFor="userId">ID</Field.Label> ~~~~~~~~~~~

Chakra UI の Field コンポーネントで、... に子要素を渡したところ TS2322 が発生しました。
@chakra-ui/react と react / @types/react のバージョン不整合、または複数バージョン共存により、Field.Label が children を受け取れない型として解釈されていた可能性が高いかなと。

npm ls @chakra-ui/react react @types/react

上記のコマンドで確認したら、ここで複数バージョンが出ました。

解決方法

npm i @chakra-ui/react@latest @emotion/react@latest
npm i -D @types/react@latest @types/react-dom@latest

これで解決しました。

おわりに

ちゃんとセットアップができてなかったのが原因のようです。

参考