I get this error when using "Cropper" from the react-easy-crop lib, I've tried a few things that I found on forums such as adding @types/react, importing * as React from "react" but nothing seems to work.
Here's the code giving me trouble:
import * as React from "react";
import Cropper from "react-easy-crop";
export default function CropperPage({action , valuePro}: any) {
return (
<Cropper // <-- This is giving me the error
cropShape= "round"
disableAutomaticStylesInjection="true"
image={image}
crop={crop}
zoom={zoom}
aspect={1}
onCropChange={setCrop}
onZoomChange={setZoom}
onCropComplete={onCropComplete}
/>
);
}
The whole error message is:
Blockquote JSX element class does not support attributes because it does not have a 'props' property.ts(2607) 'Cropper' cannot be used as a JSX component. Its instance type 'Cropper' is not a valid JSX element. Type 'Cropper' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786) (alias) class Cropper import Cropper
import Cropper from "react-easy-crop";
interface CropperFix extends React.Component {}
const Cropped = (Cropper as any) as {
new(): CropperFix;
};
const props: any = {
cropShape: "round",
disableAutomaticStylesInjection: true,
image,
crop,
zoom,
aspect: 1,
onCropChange: setCrop,
onZoomChange: setZoom,
onCropComplete: onCropComplete,
}
...
<Cropped ...props/>
Probably ugly but works