'ReactCrop' cannot be used as a JSX component.

Hi! I have a typescript error. What im doing wrong?

Full error text:

'ReactCrop' cannot be used as a JSX component.
  Its instance type 'ReactCrop' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("/Users/etomarat/Projects/niti/server/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.
          Type 'import("/Users/etomarat/Projects/niti/server/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'import("/Users/etomarat/Projects/niti/server/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'import("/Users/etomarat/Projects/niti/server/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                    Type '{}' is not assignable to type 'ReactNode'.

My code:

import React, { FC, useState, useRef } from 'react'
import { DropZone, FormGroup, Label, Box, Icon, Input, Button } from '@adminjs/design-system'
import styled from 'styled-components';
import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from 'react-image-crop'
// import 'react-image-crop/src/ReactCrop.scss'

import ImageEditorControls from './imageEditorControls'


const ImageEditor: FC = () => {
  const [imgSrc, setImgSrc] = useState('/static/kotestdinyu.png')
  const previewCanvasRef = useRef<HTMLCanvasElement>(null)
  const imgRef = useRef<HTMLImageElement>(null)
  const [crop, setCrop] = useState<Crop>()
  const [completedCrop, setCompletedCrop] = useState<PixelCrop>()
  const [scale, setScale] = useState(1)
  const [rotate, setRotate] = useState(0)
  const [aspect, setAspect] = useState<number | undefined>(9 / 16)

  return (
    <>
      <Box flex height='100%'>
        <Left bg='bg'>
          <CropHolder>
            <ReactCrop
              crop={crop}
              onChange={(_, percentCrop) => setCrop(percentCrop)}
              onComplete={(c) => setCompletedCrop(c)}
              aspect={aspect}
            >
              <Image
                wOffset
                ref={imgRef}
                alt="Crop me"
                src={imgSrc}
                style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }}
                // onLoad={onImageLoad}
              />
            </ReactCrop>
          </CropHolder>
          <ImageEditorControls />
        </Left>
        <Right>
          <Image src="/static/kotestdinyu.png"/>
        </Right>
      </Box>
    </>
  );
};

Thanks for considering my request!

[etomarat]

Thanks for your advice! I added react@^16 to my project, but unfortunately it didn’t solve the problem. I can’t switch to React above version 16, because one of the main packages in my application only supports version 16. If I install a new version, then there are problems with types already in this “main” package.

[DominicTobias]

I see, if you use React directly it should always be a depedency you declare, peer dependencies don’t get automatically installed so I guess something else has installed it, but your app should be the one that lists what version of React it wants if it uses it. Also is there a reason you don’t upgrade to 17 or 18? Usually a package can work on those too. Although not sure what the issue is in your case/v16, a bit hard to debug without a reproduction