React Antd Modal Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'

user_12089082 0
Viewed 3297

After upgrading to React 18 I have the following issue with Antd.

When using a component from Antd (Modal, Dialog, ...) it gives me this error:

TS2322: Type '{ children: ReactNode; ref: ForwardedRef<unknown>; className: string; visible: true; onCancel: (() => void) | undefined; onOk: undefined; footer: null; closable: false; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.   Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'.

Here is my component:

function TransitionsModal(props: Props): JSX.Element {
  const {
    open,
    onClose,
    children
  } = props;

  return (
    <div>
      {open &&
        <Modal
          className="flex items-center justify-center"
          visible={open}
          onCancel={onClose}
          onOk={undefined}
          footer={null}
          closable={false}>
          {children}
        </Modal>
      }
    </div>

  );
}

And here my Props:

type Props = {
  children: React.ReactNode,
  open: boolean,
  onClose?: () => void
}

I use node 17.8.0

antd typescript reactjs
3 Answers

you should use

"@types/react": "17.0.39"

instead of

"@types/react": "18.0.3"

because react18 @types is not yet compatible.

user_188089020

Issue is related to latest updates of types in react 18. In order to avoid this error if you use yarn one solution would be be to use resolutions in package.json with some lower version of react. This way your dependency will be instructed to use types form diff version.

Example:

"resolutions": { "@types/react": "17.0.30" }
user_45984070

I prefer using this comment to ignore TS error instead of downgrading types

const MasonryBrick: FC<PostCardType> = ({ imgSrc, title, excerpt }) => {
  return (
    // @ts-ignore this lib is incompatible with react18
    <Slide triggerOnce direction="up">
        <div className={s.context}>
          <h2>{title}</h2>
          <p>{excerpt}</p>
        </div>
    </Slide>
  );
};
user_132127030
Related