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

Benjamin Merchin · Answer 1 · 2022-09-28T13:33:12.400

60

I had the same error with <Text></Text> and it was because I had not imported the component.

edited Sep 28 '22 at 13:33

answered Sep 28 '22 at 13:25

Benjamin Merchin

1,029
6
11

Wow. Yeah. Autoimport backstabbed me my importing an equally named thing from a different package. – Froxx Jan 25 '23 at 15:24

score 6 · Accepted Answer · answered Oct 20 '22 at 19:11

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.

How should I change my tsconfig.json in order to force typescript to look into the @types directory first? — dannymo, Nov 29 '22 at 14:54
something like `"paths": {"*": ["node_modules/@types/*", "node_modules/*"], ...}`. you could also specifically override resolution of `react` like `"paths": {"react": ["node_modules/@types/react"]} - but if react has this issue, you've probably misconfigured such that any library that depends on types from an @types/ package will also have this issue and I figure it's better to solve the general case. — David Goldstein, Dec 04 '22 at 06:11

score 1 · Answer 3 · answered Nov 03 '22 at 10:34

I had the same issue where today this error occured on the same project that was running perfectly fine the other day. After a lot of trial and error I ended up deleting my node_modules folder and recreating it with a npm install. Then it was working again.

score 0 · Answer 4 · answered Apr 10 '23 at 02:36

Today I ran into the same issue when I am using antd Option component, my code like this:

const renderPhotoTypeImpl = () => {
    const photoList: JSX.Element[] = [];
    if (photoType && photoType.length > 0) {
    photoType.forEach(item => {
        photoList.push(
        <Option value={item} label={item}>
            <Space>
                <span role="img" aria-label="China">
                </span>
                Dog
            </Space>
        </Option>);
    });
    }
    return (<div></div>);
}

just add the Option define like this will fixed this issue:

const { Option } = Select;

ThibaudGr · Answer 5 · 2021-09-17T12:45:22.413

-2

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

edited Sep 17 '21 at 12:45

answered Sep 17 '21 at 09:48

ThibaudGr

53
3

18

any clarifications? what it does and how to fix similiar problem? – VityaSchel Nov 27 '21 at 13:36
15

Please add a brief explanation why this works – Lenzman Mar 12 '22 at 08:48
1

this solution really just works around the type system rather than doing anything right - the casts to `any` are what make it particularly ugly and destroy all type safety. – David Goldstein Oct 20 '22 at 19:06

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

5 Answers5