【Chakra UI】File Uploadコンポーネントで発生するコンソールエラーの対処法（Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?）

はじめに

お疲れ様です、りつです。

Chakra UI v3のFile Uploadコンポーネントを使用した際に発生したコンソールエラーの解消方法について共有します。

問題

以下の手順を行うと、コンソールエラーが発生ます。

1. ファイルアップロードボタン押下
2. ファイルを選択

コンソールエラー内容

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `chakra(svg)`.
    at LuFile
    ...（省略）

解決方法

Chakra UIのFile Upload用のスニペットファイルを修正します。

src/components/ui/file-upload.tsx

// 省略

const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProps>(function FileUploadItem(props, ref) {
  const { file, showSize, clearable } = props;
  return (
    <ChakraFileUpload.Item file={file} ref={ref}>
      <ChakraFileUpload.ItemPreview asChild>
+       <Icon as={LuFile} fontSize="lg" color="fg.muted" />
-       <Icon fontSize="lg" color="fg.muted">
-         <LuFile />
-       </Icon>
      </ChakraFileUpload.ItemPreview>

      {showSize ? (
        <ChakraFileUpload.ItemContent>
          <ChakraFileUpload.ItemName />
          <ChakraFileUpload.ItemSizeText />
        </ChakraFileUpload.ItemContent>
      ) : (
        <ChakraFileUpload.ItemName flex="1" />
      )}

      {clearable && (
        <ChakraFileUpload.ItemDeleteTrigger asChild>
          <IconButton variant="ghost" color="fg.muted" size="xs">
            <LuX />
          </IconButton>
        </ChakraFileUpload.ItemDeleteTrigger>
      )}
    </ChakraFileUpload.Item>
  );
});

// 省略

おわりに

上記修正により、コンソールエラーを回避することができました。

File Uploadコンポーネント周りは特に情報が少ないように感じています。。

参考