CODEWITHSUNDEEP
javascripthtmlreactjsjsxtsx
cricciardi
cricciardi

Reputation: 817

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

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

Upvotes: 60

Views: 79416

Answers (6)

Garantor
Garantor

Reputation: 93

If you're using vscode, restarting vscode resolve the issue

Upvotes: 0

Dolphin
Dolphin

Reputation: 38641

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;

Upvotes: 0

flonair22
flonair22

Reputation: 43

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.

Upvotes: 3

David Goldstein
David Goldstein

Reputation: 400

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.

Upvotes: 9

Benjamin Merchin
Benjamin Merchin

Reputation: 1769

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

Upvotes: 123

ThibaudGr
ThibaudGr

Reputation: 59

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

Upvotes: -3

Related Questions