Chakra UI 3.34.0：「Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & DialogContentProps & RefAttributes<HTMLDivElement>'.」の解決方法

はじめに

Chakra UIのDialogを使おうと思い、サンプルコードをコピペしたところエラーが出ました。

使っているChakra UIのバージョン：3.34.0

問題

【エラー内容】

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & DialogContentProps & RefAttributes<HTMLDivElement>'.

childrenを渡しているのに、propsの型にchildrenが含まれないという意味らしいです。

このエラーが発生したコンポーネント

• Dialog.Trigger
• Dialog.Positionar
• Dialog.Content
• Dialog.Title
• Dialog.CloseTrigger

【エラー時のソースコード（ドキュメントのサンプルコード）】

import {
  Button,
  CloseButton,
  Dialog,
  For,
  HStack,
  Portal,
} from "@chakra-ui/react"


const Demo = () => {
  return (
    <HStack>
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <Dialog.Root key={size} size={size}>
            <Dialog.Trigger asChild>
              <Button variant="outline" size={size}>
                Open ({size})
              </Button>
            </Dialog.Trigger>
            <Portal>
              <Dialog.Backdrop />
              <Dialog.Positioner>
                <Dialog.Content>
                  <Dialog.Header>
                    <Dialog.Title>Dialog Title</Dialog.Title>
                  </Dialog.Header>
                  <Dialog.Body>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </p>
                  </Dialog.Body>
                  <Dialog.Footer>
                    <Dialog.ActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </Dialog.ActionTrigger>
                    <Button>Save</Button>
                  </Dialog.Footer>
                  <Dialog.CloseTrigger asChild>
                    <CloseButton size="sm" />
                  </Dialog.CloseTrigger>
                </Dialog.Content>
              </Dialog.Positioner>
            </Portal>
          </Dialog.Root>
        )}
      </For>
    </HStack>
  )
}

解決方法

import { Button, CloseButton, Dialog, For, HStack, Portal } from '@chakra-ui/react';
import type React from 'react';
import type { FC } from 'react';

interface CustomDialogTriggerProps extends Dialog.TriggerProps {
  children?: React.ReactNode;
  asChild?: boolean;
}

interface CustomDialogPositionerProps extends Dialog.PositionerProps {
  children?: React.ReactNode;
}

interface CustomDialogContentProps extends Dialog.ContentProps {
  children?: React.ReactNode;
}

interface CustomDialogTitleProps extends Dialog.TitleProps {
  children?: React.ReactNode;
}

interface CustomDialogCloseTriggerProps extends Dialog.CloseTriggerProps {
  children?: React.ReactNode;
  asChild?: boolean;
}

const DialogTriggerWithType = Dialog.Trigger as FC<CustomDialogTriggerProps>;
const DialogPositionerWithType = Dialog.Positioner as FC<CustomDialogPositionerProps>;
const DialogContentWithType = Dialog.Content as FC<CustomDialogContentProps>;
const DialogTitleWithType = Dialog.Title as FC<CustomDialogTitleProps>;
const DialogCloseTriggerWithType = Dialog.CloseTrigger as FC<CustomDialogCloseTriggerProps>;

export const Demo = () => {
  return (
    <HStack>
      <For each={['xs', 'sm', 'md', 'lg']}>
        {(size) => (
          <Dialog.Root key={size} size={size}>
            <DialogTriggerWithType asChild>
              <Button variant="outline" size={size}>
                Open ({size})
              </Button>
            </DialogTriggerWithType>
            <Portal>
              <Dialog.Backdrop />
              <DialogPositionerWithType>
                <DialogContentWithType>
                  <Dialog.Header>
                    <DialogTitleWithType>Dialog Title</DialogTitleWithType>
                  </Dialog.Header>
                  <Dialog.Body>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  </Dialog.Body>
                  <Dialog.Footer>
                    <Dialog.ActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </Dialog.ActionTrigger>
                    <Button>Save</Button>
                  </Dialog.Footer>
                  <DialogCloseTriggerWithType asChild>
                    <CloseButton size="sm" />
                  </DialogCloseTriggerWithType>
                </DialogContentWithType>
              </DialogPositionerWithType>
            </Portal>
          </Dialog.Root>
        )}
      </For>
    </HStack>
  );
};

型定義を拡張し、childrenを受け取れるようにしたら解決しました。

このエラーはtoasterやtooltipなどChakra UIの別機能でも発生していたので、そこでも同じように型定義を拡張して、childrenを受け取れるようにしました。

おわりに

参考記事の人が言ってたようにこれはバグなんですかね
サンプルコードが動かないのはストレスだったので、早く直ってほしいです笑

ただ、型定義を拡張したり、元の型定義を見に行ったりというのは勉強になりました。

参考記事