Property 'placeholder' is missing in type... for some 'non-form' components? #528
Comments
|
It's also in |
|
Same problem on all Typography, List, Accordion etc |
|
If it's not a feature, it' a bug. Strange enough, installing back I did today an update of VC on Mac too. Could it be related to the VisualCode update? I'm not fluent in VC and don't know how to downgrade to test. By the way. I had and still have a similar issue with the Input component. It requires So, if your project is still in the beginning and small, one could temporary work around with adding |
|
@don-esteban this not related to VC. 😞 Try to run This bug is happening with I made some regression tests, and on But, on 2.1.0-react version, the bug came back to It's my first time on |
This is a bug, introduced in The "placeholder" issue is likely related. It was introduced in TL;DR: Until this is fixed, your best bet is to downgrade Hope this helps :) |
|
I downgraded Now, all things are working. Thanks, Bob! ❤️ |
|
@rafaelvieiras You are right Not sure how to address this, except pinning the version of @types/react. Thx! |
|
Updated material-tailwind today 2.1.7 and types for latest versions to fix a specific SSR render in Next 14 and face this problem with almost every component from the lib... I confirm too that, the only way I found to deal with this was backing version to "@types/react": "18.2.42" ... I won't touch this anymore since the application will grow and we don't have time to waste ... Thx @BobDotCom !!! 🤘 |
|
Sorry to open this up again but to me it seems like the issue revolves around |
|
I had could solve my problem changing version like Bob mentions, some like this:
|
|
I had to go down to 18.2.19 to fix this. 18.2.42 didnt solve it. // package.json |
|
I did the following to fix the bug of material-tailwind. |
|
Confirm I was using Type problem was with Button component and some others |
this solve my problem |
|
But having a minor version instead of the major is not a problem? We can have type errors if we continue using that old version. Am I wrong? |
|
Certainly, it is, and I'm not aware of any other tools allowing a bug of this nature to linger for such an extended period without even informing the community about future plans. We've decided to move away. Currently, we utilize Material Tailwind exclusively for quick and dirty prototyping. |
|
Still throwing a bunch of errors after trying all the different versions of material/tailwind and types/react. Is there a specific typescript version dependency? |
|
How did this help, I have installed react 18 and tried to upgrade it with 'npm i react-update', but in my package.json react keeps showing 18. |
Set your app to run react 17 if your other dependencies allows react 17. If not then kindly step away. I ended up running bootstrap for my project. To much of a hassle to fix my dependencies for v17. |
|
is this not solved yet? |
|
I didn't have the time to figure out the root problem and fix what was causing it, so I resorted to the nonsense solution below. Nonsense solutionimport React from "react";
import {
Typography as OriginTypography,
Button as OriginButton,
ButtonGroup as OriginButtonGroup,
Input as OriginInput,
Checkbox as OriginCheckbox,
Card as OriginCard,
ListItem as OriginListItem,
ListItemPrefix as OriginListItemPrefix,
List as OriginList,
CardBody as OriginCardBody,
CardFooter as OriginCardFooter,
CardHeader as OriginCardHeader,
Dialog as OriginDialog,
DialogBody as OriginDialogBody,
DialogFooter as OriginDialogFooter,
DialogHeader as OriginDialogHeader,
Avatar as OriginAvatar,
IconButton as OriginIconButton,
Drawer as OriginDrawer,
Navbar as OriginNavbar,
} from "@material-tailwind/react";
// placeholder={undefined} is not a valid prop for Typography
type TypographyProps = Omit<React.ComponentProps<typeof OriginTypography>, "placeholder">;
export function Typography(props: TypographyProps) {
return <OriginTypography {...props} placeholder={undefined}>
{props.children}
</OriginTypography>;
}
type ButtonProps = Omit<React.ComponentProps<typeof OriginButton>, "placeholder">;
export function Button(props: ButtonProps) {
return <OriginButton {...props} placeholder={undefined}>
{props.children}
</OriginButton>;
}
type ButtonGroupProps = Omit<React.ComponentProps<typeof OriginButtonGroup>, "placeholder">;
export function ButtonGroup(props: ButtonGroupProps) {
return <OriginButtonGroup {...props} placeholder={undefined}>
{props.children}
</OriginButtonGroup>;
}
type InputProps = Omit<React.ComponentProps<typeof OriginInput>, "crossOrigin">;
export function Input(props: InputProps) {
return <OriginInput {...props} crossOrigin={undefined} />;
}
type CardProps = Omit<React.ComponentProps<typeof OriginCard>, "placeholder">;
export function Card(props: CardProps) {
return <OriginCard {...props} placeholder={undefined} />;
}
type ListItemProps = Omit<React.ComponentProps<typeof OriginListItem>, "placeholder">;
export function ListItem(props: ListItemProps) {
return <OriginListItem {...props} placeholder={undefined}>
{props.children}
</OriginListItem>;
}
type ListItemPrefixProps = Omit<React.ComponentProps<typeof OriginListItemPrefix>, "placeholder">;
export function ListItemPrefix(props: ListItemPrefixProps) {
return <OriginListItemPrefix {...props} placeholder={undefined}>
{props.children}
</OriginListItemPrefix>;
}
type ListProps = Omit<React.ComponentProps<typeof OriginList>, "placeholder">;
export function List(props: ListProps) {
return <OriginList {...props} placeholder={undefined}>
{props.children}
</OriginList>;
}
type CardBodyProps = Omit<React.ComponentProps<typeof OriginCardBody>, "placeholder">;
export function CardBody(props: CardBodyProps) {
return <OriginCardBody {...props} placeholder={undefined}>
{props.children}
</OriginCardBody>;
}
type CardFooterProps = Omit<React.ComponentProps<typeof OriginCardFooter>, "placeholder">;
export function CardFooter(props: CardFooterProps) {
return <OriginCardFooter {...props} placeholder={undefined}>
{props.children}
</OriginCardFooter>;
}
type CardHeaderProps = Omit<React.ComponentProps<typeof OriginCardHeader>, "placeholder">;
export function CardHeader(props: CardHeaderProps) {
return <OriginCardHeader {...props} placeholder={undefined}>
{props.children}
</OriginCardHeader>;
}
type DialogProps = Omit<React.ComponentProps<typeof OriginDialog>, "placeholder">;
export function Dialog(props: DialogProps) {
return <OriginDialog {...props} placeholder={undefined}>
{props.children}
</OriginDialog>;
}
type DialogBodyProps = Omit<React.ComponentProps<typeof OriginDialogBody>, "placeholder">;
export function DialogBody(props: DialogBodyProps) {
return <OriginDialogBody {...props} placeholder={undefined}>
{props.children}
</OriginDialogBody>;
}
type DialogFooterProps = Omit<React.ComponentProps<typeof OriginDialogFooter>, "placeholder">;
export function DialogFooter(props: DialogFooterProps) {
return <OriginDialogFooter {...props} placeholder={undefined}>
{props.children}
</OriginDialogFooter>;
}
type DialogHeaderProps = Omit<React.ComponentProps<typeof OriginDialogHeader>, "placeholder">;
export function DialogHeader(props: DialogHeaderProps) {
return <OriginDialogHeader {...props} placeholder={undefined}>
{props.children}
</OriginDialogHeader>;
}
type AvatarProps = Omit<React.ComponentProps<typeof OriginAvatar>, "placeholder">;
export function Avatar(props: AvatarProps) {
return <OriginAvatar {...props} placeholder={undefined} />;
}
type IconButtonProps = Omit<React.ComponentProps<typeof OriginIconButton>, "placeholder">;
export function IconButton(props: IconButtonProps) {
return <OriginIconButton {...props} placeholder={undefined} />;
}
type CheckboxProps = Omit<React.ComponentProps<typeof OriginCheckbox>, "crossOrigin">;
export function Checkbox(props: CheckboxProps) {
return <OriginCheckbox {...props} crossOrigin={undefined} />;
}
type DrawerProps = Omit<React.ComponentProps<typeof OriginDrawer>, "placeholder">;
export function Drawer(props: DrawerProps) {
return <OriginDrawer {...props} placeholder={undefined}>
{props.children}
</OriginDrawer>;
}
type NavbarProps = Omit<React.ComponentProps<typeof OriginNavbar>, "placeholder">;
export function Navbar(props: NavbarProps) {
return <OriginNavbar {...props} placeholder={undefined}>
{props.children}
</OriginNavbar>;
} |
|
For me running |
|
|
|
When will it be modified? |
|
This solve my problem thanks |
|
I prefer not to downgrade a package version, as I understand it varies from developer to developer. Instead, we can explore manipulating type definitions. I am using VSCode for the demo; feel free to use the IDE you prefer. Now, you will see an error about the missing 'prop placeholder' if you are using TypeScript or a linter
Place your mouse on a button element where you see a reddish line; simply hover over the button.
Now, press the CTRL key and click the mouse after hovering over the button. Simply press
Now you can see the path in the header of a popup. In my case, it is 'C:\Users\username\OneDrive\Documents\code\solution\node_modules@material-tailwind\react\components\Button'. Click on that path.
If you see something like the image above, congratulations, we have landed on the correct page
Now, add a placeholder prop as an optional prop using the One drawback of this approach is that you need to follow this process for each component, such as Card, Typography, etc. It's quite a lengthy process, but I hope it proves helpful. |
|
Maybe adding |
I can confirm that this works |
|
I apologize for my clear words. But this is all “Kindergarten”. If the tool provider does not provide a viable solution for an obvious bug over months nor communicates a future plan/timeline, just move away, as we did. Never do serious development with non-professional hobby tools. |
|
You don't have to downgrade But there is no trust in this library |
|
|
|
FYI - This issue has already been tracked here. |
|
Went through all the proposed "solutions" and nothing worked. Tinkering with my package versions doesn't seem okay, especially in the long run. If you still have issues with the library, just look elsewhere as @don-esteban said. |
|
Meantime, we moved away, even for prototyping, to daisyUI. It is not material, but flexible, stable, feature rich and important too, it has a responsive and friendly contributer and user community. And have a look at open issues. daisyUI has significant more users but few open issues. The concept is different. It doese not exposes React components. It exposes just new Tailwind untilities, doing the job. So, you do not learn new components. You learn new utility classes. |
|
I was already using daisyUI in my project. I wanted to speed up development by switching to Material Tailwind. But, I'll stick to daisyUI moving forward. Yes, it's not the same but stable and flexible. Also easy to pick up IMO. |
|
Type '{ children: Element[]; }' is missing the following properties from type 'Pick<CarouselProps, "children" | "className" | "color" | "transition" | "translate" | "slot" | "style" | "title" | "onChange" | "loop" | "onClick" | "key" | "defaultChecked" | ... 252 more ... | "slideRef">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739) I also had the same error. I was using material-tailwind library with next.js 14. <Carousel I added this attribute now it's not showing any typescript error. |
and others
hi folks, I'm currently having a weird issue with the material-tailwind library, I tried to use the Sticky NavBar, and I got the following weird error:
btw, this happen with the Button, Typography, Navbar and IconButton (idk if other components will have the issue)
I've used this library in another project and that error never appeared, I have more dependencies but this are the ones I believe may be related:
here is an image of my code:
let me know if you need more info to figure it out, btw I get rid of the error by simply adding
placeholder=""to all the components with the error, but checking the documentation the propplaceholderdoesn't exists for those componentsThe text was updated successfully, but these errors were encountered: