🎃

【ChakraUI】「式は、複雑すぎて表現できない共用体型を生成します」を解消する

2024/03/29に公開

これはなに

chakraUIをインストールしていざ使おうとしたら以下のエラーがでた。

Expression produces a union type that is too complex to represent.ts(2590)

式は、複雑すぎて表現できない共用体型を生成します

これを解消するために行なったことを備忘録的にまとめる。

typescript: 5.4.3
@chakra-ui/react: 2.8.2
@emotion/react: 11.11.4
@emotion/styled: 11.11.0

Vite(React)で環境構築済み。

TypeScriptのワークスペースとバージョンを合わせればいけるとのことだったが、自分の環境ではそれでも解消せず。

tyepscriptと@chakra-ui/reactのバージョンを色々変えてみたがそれでもうまくいかず。

結果、tsconfig.jsonで下記をコメントアウト（削除）したら解消。

"jsxImportSource": "@emotion/react"

emotion/react を使用するためにこの記述が必要だが、これをコメントアウトしたので css が使えなくなる。

そこでこの記述を vite.config.ts にもってくる。

plugins: [
    react({
        jsxImportSource: "@emotion/react",
    }),
],

これで emotion は使えるし、エラーは解消された。

jsxやjsxsのファクトリ関数をインポートする際に使用するモジュール指定子を宣言する