[MISSING_EXPORT] "forwardRef" is not exported by "node_modules/@chakra-ui/react/dist/esm/index.js". ╭─[ node_modules/@chakra-ui/icons/dist/esm/Spinner.mjs:2:10 ]

はじめに

• chakra-uiのIconButtonでハンバーガーメニューを適用できなかった

問題

• これでiconというプロパティがないとも言われるし、開発サーバー起動時に表題のエラー

import { HambergerMenu } from "@chakra-ui/react"

<IconButton aria-label="Menu" icon={HambergerMenu} />

解決

• childrenにするのと、react-iconを使うことで解決

import { GiHamburgerMenu } from "react-icons/gi";

<IconButton aria-label="Menu">
  <GiHamburgerMenu />
</IconButton>

終わりに

公式ドキュメントでchildrenになっている実装例

react-iconsなどを使うと良いというissue

react-iconsのハンバーガーメニュー