material-tailwind: Property 'crossOrigin' is missing in type ???

What is this?

This happens on the last release “@material-tailwind/react”: “^2.1.0”

 ERROR(TypeScript)  Property 'crossOrigin' is missing in type '{ color: "deep-orange"; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; label: string; type: "number"; step: number; }' but required in type 'Pick<InputProps, "form" | "label" | "slot" | "style" | "title" | "pattern" | "id" | "className" | "color" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | ... 285 more ... | "shrink">'.
 FILE  APP/src/pages/products.tsx:2998:14

    2996 |                                                                                      .includes('mercadolibre') && (
    2997 |                                                                                      <div className='h-auto w-full py-3'>
  > 2998 |                                                                                              <Input
         |                                                                                               ^^^^^
    2999 |                                                                                                      color='deep-orange'
    3000 |                                                                                                      value={searchParams.get('safety_stock') || ''}
    3001 |                                                                                                      onChange={(e) => {

About this issue

Original URL
State: open
Created a year ago
Reactions: 9
Comments: 20

Commits related to this issue

fix: downgrade @types/react to 18.2.19 The latest versions have a bug, see creativetimofficial/material-tailwind#427 for more. — committed to BobDotCom/oprf-rank-viewer by BobDotCom 7 months ago
- Downgraded @types/react to 18.2.19 to fix TS2741 (https://github.com/creativetimofficial/material-tailwind/issues/427) — committed to City-CSS/HackathonWebsite by Supermarcel10 5 months ago
- Downgraded @types/react to 18.2.19 to fix TS2741 (https://github.com/creativetimofficial/material-tailwind/issues/427) — committed to City-CSS/HackathonWebsite by Supermarcel10 5 months ago
material-tailwind/reactコンポーネントの不要なcrossOrigin削除。@types/react@18.2.9に固定 https://github.com/creativetimofficial/material-tailwind/issues/427#issuecomment-1677457929 — committed to beeskynet/beePrompt by ytkayamura 3 months ago

Most upvoted comments

I got the same error and also thought, it’s because of this package. But actually the error occurs, when I update @types/react to v18.2.20.

With @types/react v18.2.19 and @material-tailwind/react v2.1.0 everything works fine.

+20

sebkasanzew on Aug 14, 2023

i update typescript to 5.2.2 and changed @types/react from 18.2.21 to 18.2.19 and its solved

rikarani on Sep 24, 2023

I have the same issue with several components now 😦.

Updates: One thing that I did, I just added this crossOrigin to each component -> crossOrigin=“”. It works for me, but it looks weird and I don’t understand why it should be there.

phil-situmorang on Aug 10, 2023

This is actually a bug in @react/types after 18.2.19. This PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/66304 attempted to remove crossOrigin from the input type, but failed to remove it from the base element type (https://github.com/DefinitelyTyped/DefinitelyTyped/commit/4c05e062dd7c585212508ed52d52c0f6be822bb3#diff-32cfd8cb197872bcba371f5018185d2e75fa540b52cda2dd7d8ac12dcc021299). I will attempt to PR it myself in DefinitelyTyped soon.

zaventh on Oct 17, 2023

Downgrading @types/react to 18.2.9 is not a solution. Currently, I am using react @types/react:17.0.0 with "typescript": "5.2.2", and it’s still showing me the same error as everyone else above.

DvzH on Dec 15, 2023

I got the same error and also thought, it’s because of this package. But actually the error occurs, when I update @types/react to v18.2.20.

With @types/react v18.2.19 and @material-tailwind/react v2.1.0 everything works fine.

Can confirm I had this issue a while ago and the above solution fixed it

tannerboysun on Aug 24, 2023

I am having the same issue as well. I can set crossOrigin={undefined}, but I noticed that typescript infers the type as unknown. Looking at the InputProps in node_modules/@material-tailwind/react/components/Input/index.d.ts, I notice my editor (VS Code) can’t infer the type of crossOrigin. However, if I follow these types like so:

InputProps => React.ComponentProps<'input'> => IntrinsicElements => GlobalIntrinsicElements => JSX.IntrinsicElements

I find this property:

{
  //...
  crossOrigin?: CrossOrigin;
  // ...
}

where CrossOrigin is defined as:

type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;

So I am not sure why my editor is inferring the type as unknown, and I am also curious as to why the compiler complains about this being required since it is clearly marked as optional (and it is later wrapped in Partial<> in ForwardRefExoticComponent).

ajohnston1219 on Aug 13, 2023

it still not fixed in latest @types/react & @material-tailwind/react isn’t it?

It’s not with “@material-tailwind/react”: “2.1.9” and “@types/react”: “18.2.73”

i’ve locked down @types/react to 18.2.9 for now.

Kimpo79 on Mar 31, 2024

any updates? change ti 18.2.19 doesnt solve

csxmaia on Nov 27, 2023

I have the simililar problem La propiedad “crossOrigin” falta en el tipo “{ label: string; }”, pero es obligatoria en el tipo “Pick<InputProps, “form” | “label” | “slot” | “style” | “title” | “pattern” | “src” | “className” | “children” | “color” | “translate” | “onClick” | “key” | “defaultChecked” | … 284 more … | “shrink”>”.ts(2741)

DonVoid18 on Oct 22, 2023

I have the same problem, but no solved for me this solution.

i update typescript to 5.2.2 and changed @types/react from 18.2.21 to 18.2.19 and its solved

brianifarias on Oct 17, 2023

Do we have any progress on this issue? I’d like to suggest that specifying "@types/react": "18.2.19" should be seen as a temporary solution, not a permanent fix.

barrenechea on Oct 13, 2023

Having same issue with all components too

MohamedJerbi on Aug 13, 2023