JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

Question

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

Answer 1

So I actually ran into this recently and after failing to find an answer here, was able to use typescript's traceResolution feature to discover: typescript was resolving import "react" to node_modules/react/index.js instead of node_modules/@types/react/index.d.ts. Some changes to my tsconfig.json were able to resolve this - I had node_modules/* in one of my paths matches, and had to add node_modules/@types/* to also get it to look for @types/ packages.

So I'd recommend using traceResolution (either as a tsc flag, or a tsconfig.json field) and seeing if react is mis-resolving, and if it is the case, focus on fixing that; it could be the same issue where node_modules/react gets found instead of node_modules/@types/react though the traceResolution output will have a clear final word on that.