React Antd 模态属性 'children' 在类型'IntrinsicAttributes & ModalProps' 上不存在

Question

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

Answer 1

you should use

"@types/react": "17.0.39" 

instead of

"@types/react": "18.0.3"

because react18 @types is not yet compatible.

Answer 2

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" }

Answer 3

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>
  );
};