Property 'crossOrigin' is missing in type <Input /> ???

[kenzaflow]

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) => {

[phil-situmorang]

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.

[MohamedJerbi]

Having same issue with all components too

[ajohnston1219]

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).

[sebkasanzew]

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.

[tannerboysun]

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

[odashi]

It still happens in @material-tailwind/react v2.1.1. Using @types/react v18.2.19 works around the issue as well.

[isaacrmoreno]

Has anyone found a solution to this but with Geist? (https://github.com/geist-org/geist-ui)

[HendryXX1]

I only had to update typescript to 5.2.2, React to 18.2.0, and @types/react to 18.2.21.

[rikarani]

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

[barrenechea]

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.

[brianifarias]

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

[zaventh]

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

[DonVoid18]

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)

[diegofranca92]

someone solve this ?

[Phazerous]

someone solve this ?

To solve this, I just changed the @types/react to 18.2.19 and the issue is gone

My other packages:

"react": "^18",
"react-dom": "^18",
"@types/react": "18.2.19",
"@types/react-dom": "^18",

[csxmaia]

any updates?
change ti 18.2.19 doesnt solve

[DvzH]

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.

[metacop]

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.

Thanks friend, this even solved the component problems that require a placeHolders for me. Update the @react-types. and I have "@material-tailwind/react": "2.1.8".

[consciousnessdev]

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

[Kimpo79]

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.