TypeError: (0 , ...forwardRef) is not a functionと出力されてしまう件

はじめに

アイコンボタンを入力し、適切な画面が出力されるかどうか調査しました。

ゴールは写真のようなイメージ

前回の記事は以下。
https://qiita.com/o68606007/items/06d1b2a8ae0d3a27aaef

問題

chakra-uiからDrawerの記載を行いましたがTypeエラーとなりました。
エラー原因は何かを調査するのに時間を溶かしました。

Router

import { memo, FC } from "react";
import { Flex, Heading, Box, Link, IconButton, Drawer, useDisclosure, } from "@chakra-ui/react"; 
import { HamburgerIcon } from "@chakra-ui/icons"; 

export const Header: FC = memo(() => {
 const { isOpen, onOpen, onClose } = useDisclosure();
 return (
 　<>
 　　<Flex as="nav" bg="teal.500" color="gray.50" align="center" justify="space-between" padding={{ base: 3, md: 5 }} >
 　　<Flex align="center" as="a" mr={8} _hover={{ cursor: "pointer" }}>
 　　　<Heading as="h1" fontSize={{ base: "md", md: "lg" }}> ユーザー管理アプリ </Heading>
 　　</Flex>
 　　<Flex align="center" fontSize="sm" flexGrow={2} display={{ base: "none", md: "flex" }} >
 　　　<Box pr={4}>
 　　　　<Link>ユーザー一覧</Link>
 　　　</Box>
 　　　<Link>設定</Link>
 　　</Flex>
 　<IconButton area-label="menubutton" icon={<HamburgerIcon />} size="sm" variant="unstyled" display={{ base: "block", md: "none" }} onClick={onOpen} />
 　</Flex>
 　<Drawer placement="left" size="xs" onClose={onClose} isOpen={isOpen}>
 　　<DrawerOverlay>
 　　　<DrawerContent>
 　　　　<DrawerBody>
 　　　　　<Button>Top</Button>
 　　　　　<Button>ユーザー一覧</Button>
 　　　　　<Button>設定</Button>
 　　　　</DrawerBody>
 　　　</DrawerContent>
 　　</DrawerOverlay>
 　</Drawer>
 </> 
);
 });

解決方法

chakra-ui Ver2→Ver3の変更で以下の箇所がありました。

v2	v3
Drawer isOpen onClose	Drawer.Root
DrawerOverlay	廃止
DrawerContent	Drawer.Content
DrawerBody	Drawer.Body
useDisclosure()	基本不要（Trigger方式）

また、v3 では @chakra-ui/icons は公式非推奨のため、HamburgerIcon を置き換えました。

Header

import { memo, FC } from "react";
import {
  Flex,
  Heading,
  Box,
  Link,
  Button,
  IconButton,
  Drawer,
  useDisclosure,
} from "@chakra-ui/react";
// import { HamburgerIcon } from "@chakra-ui/icons";
import { Menu } from "lucide-react";

export const Header: FC = memo(() => {
  return (
    <>
      <Flex
        as="nav"
        bg="teal.500"
        color="gray.50"
        align="center"
        justify="space-between"
        padding={{ base: 3, md: 5 }}
      >
        <Flex align="center" as="a" mr={8} _hover={{ cursor: "pointer" }}>
          <Heading as="h1" fontSize={{ base: "md", md: "lg" }}>
            ユーザー管理アプリ
          </Heading>
        </Flex>
        <Flex
          align="center"
          fontSize="sm"
          flexGrow={2}
          display={{ base: "none", md: "flex" }}
        >
          <Box pr={4}>
            <Link>ユーザー一覧</Link>
          </Box>
          <Link>設定</Link>
        </Flex>
        <Drawer.Root>
          <Drawer.Trigger asChild>
            <IconButton
              aria-label="menubutton"
              icon={<Menu size={18} />}
              size="sm"
              variant="ghost"
              display={{ base: "block", md: "none" }}
            />
          </Drawer.Trigger>
          <Drawer.Content>
            <Drawer.Body>
              <Button w="100%" mb={2}>
                Top
              </Button>
              <Button w="100%" mb={2}>
                ユーザー一覧
              </Button>
              <Button w="100%">設定</Button>
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Root>
      </Flex>
    </>
  );
});

おわりに

非互換になっていないかなどの調査は必要です。

参考