creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.81k stars 321 forks source link

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

Open kenzaflow opened 1 year ago

kenzaflow commented 1 year ago

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

image

phil-situmorang commented 1 year ago

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 commented 1 year ago

Having same issue with all components too

ajohnston1219 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

isaacrmoreno commented 1 year ago

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

HendryXX1 commented 1 year ago

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

rikarani commented 1 year ago

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

barrenechea commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

DonVoid18 commented 1 year ago

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 commented 11 months ago

someone solve this ?

Phazerous commented 11 months ago

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 commented 11 months ago

any updates? change ti 18.2.19 doesnt solve

DvzH commented 10 months ago

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 commented 10 months ago

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 commented 7 months ago

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

Kimpo79 commented 7 months ago

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.

p-lorenzo commented 2 months ago

Having to use old @types/react doesn't seem a good solution i believe, i get other problems when using older version of that package, any news? Optional props should be optional, I am preferring to add crossOrigin="undefined" as of now instead of using older version of @types/react

JoaoVictorFerrer commented 2 months ago

Sigue ocurriendo en @material-tailwind/reactla versión v2.1.1. La @types/reactversión v18.2.19 también soluciona el problema.

me funciono cambiar este el type a esta version