Chakra UI v3でextendThemeが使用できない問題とその解決策

エラー発生経緯

Chakra UIを使用してReactアプリケーションを開発している際に、extendTheme関数を使用してテーマをカスタマイズしようとしたところ、「Module '"@chakra-ui/react"' has no exported member 'extendTheme'」というエラーが発生。本記事では、このエラーの原因とについてまとめます。

対応したこと

・Chckra UIのバージョンを確認と最新バージョンのインストール

npm list @chakra-ui/react
npm install @chakra-ui/react@latest

・バージョンを指定してインストール
※今回はこちらで解決

npm install @chakra-ui/react@2.8.0

原因分析

当初は最新版をインストールしており、そちらは3.xだったため3.xとバージョン2.xではエクスポート方法が変わった可能性あり。
解決策としてはChakra UIのバージョンを下げることあるいはv3の変更に沿った書き方をする。

・Chakra UI 公式サイト v2
https://v2.chakra-ui.com/docs/styled-system/customize-theme#theme-extension-withdefaultcolorscheme

import { extendTheme } from '@chakra-ui/react';

・Chakra UI 公式サイト v3
https://next.chakra-ui.com/docs/components/theme

→v3のドキュメントを見る限り、下記に変更

import { Theme } from '@chakra-ui/react';

今後の教訓

・ライブラリのバージョンアップ時の変更点を確認する
・公式ドキュメントをこまめに確認する。

まとめ

今回は、Chakra UIのバージョンアップに伴いextendThemeが使用できなくなったという問題を解決。バージョンアップに伴う変更点には注意し、公式ドキュメントを参考に開発を進めることが重要だとより感じました。