📝
Next.js x Chakra UI x TypeScript環境でのエラー
Next.js で Chakra UI を利用している際に次のエラーが発生しました。
「Expression produces a union type that is too complex to represent. 」
直訳では「式は、表現が複雑すぎるユニオンタイプを生成します」です。
結論： Chakra UI を2.5.5にアップデートしたら直りました。
利用していたバージョンです。
"next": "13.2.4",
"@chakra-ui/react": "^2.5.2",
解決策
Chakra UI を2.5.5にアップデートします。
今回はncuを使ってパッケージすべてアップデートします。
個別にアップデートする場合はncu -uではなく、@chakra-ui/reactをアンインストール後に再度インストールしてください。
# アップデートの確認
ncu
# package.jsonの更新
ncu -u
# 更新されたpackage.jsonのパッケージをインストール
npm install
その他の解決策
GitHubのissuesにTypeScriptをバージョン5からバージョン4.9.5にダウングレードするという解決方法が出ています。
しかし、この方法はやめました。なぜならTS5を使いたいので。
Discussion