Property 'placeholder' is missing in type... for some 'non-form' components?

[isantiago95]

trafficstars

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:

Property 'placeholder' is missing in type '{ children: Element[]; className: string; }' but required in type 'Pick<NavbarProps, "children" | "className" | "color" | "translate" | "slot" | "style" | "title" | "onClick" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 249 more ... | "blurred">'.ts(2741)
(alias) const Navbar: React.ForwardRefExoticComponent<Pick<NavbarProps, "children" | "className" | "color" | "translate" | "slot" | "style" | "title" | "onClick" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 249 more ... | "blurred"> & React.RefAttributes<...>>

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:

  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@material-tailwind/react": "^2.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.1",
    "vite-tsconfig-paths": "^4.2.2"
  },
  "devDependencies": {
    "@types/node": "^20.10.4",
    "@types/react-dom": "^18.2.17",
    "@types/react-router-dom": "^5.3.3",
    "@types/react": "^18.2.43",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "sass": "^1.69.5",
    "tailwind-scrollbar": "^3.0.5",
    "tailwindcss": "^3.3.3",
    "ts-jest": "^29.1.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.7"
  },

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 prop placeholder doesn't exists for those components

[willfolsom]

It's also in <Card /> and possibly elsewhere.

[OG-Mihawk]

Same problem on all Typography, List, Accordion etc

[don-esteban]

If it's not a feature, it' a bug.

Strange enough, installing back npm install @material-tailwind/[email protected] did not help. The issue/feature persist.

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 crossOrigin={undefined} attribute. Without, I get a similar error message. Could not find docs about this attribute.

So, if your project is still in the beginning and small, one could temporary work around with adding placeholder={undefined}.

[rafaelvieiras]

@don-esteban this not related to VC. 😞

Try to run npm build (here I use pnpm), you see Property 'placeholder' is missing in type....

This bug is happening with Button, Typography, CardBody, CardHeader and Card ~all~ components.

I made some regression tests, and on Typography I tried to back to 2.0.8-react version and on this version the bug no happening.

But, on 2.1.0-react version, the bug came back to Typography component, maybe is related to this commit.

It's my first time on material-tailwind and I don't know if this is a bug or a feature. 😄

[BobDotCom]

By the way. I had and still have a similar issue with the Input component. It requires crossOrigin={undefined} attribute.

This is a bug, introduced in @types/react v18.2.20. It is tracked by issue #427, and a temporary workaround is to downgrade to @types/react v18.2.19. (Some comments mention typescript and react need to be updated to latest as well)

The "placeholder" issue is likely related. It was introduced in @types/react v18.2.43, so downgrading to @types/react v18.2.42 will work as a temporary workaround.

TL;DR: Until this is fixed, your best bet is to downgrade @types/react to v18.2.19.

Hope this helps :)

[rafaelvieiras]

I downgraded @types/react to 18.2.42 and locked to this version.

Now, all things are working. Thanks, Bob! ❤️

[gurkerl83]

@rafaelvieiras You are right "@types/react": "18.2.42" is the last working version. It seems the problem was introduced when this was merged https://github.com/DefinitelyTyped/DefinitelyTyped/pull/67170

Not sure how to address this, except pinning the version of @types/react.

Thx!

[MarceloViannaDev]

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 !!! 🤘

[YassBaer]

Sorry to open this up again but to me it seems like the issue revolves around export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, [...] | 'placeholder' | [...] > inside @material-tailwind/react/components/Button/index.d.ts. Picking an non-existent property seems to add that property to the resulting type with a type of unknown, removing 'placeholder' from that list of picked Properties solves the issue for me. I don't know how those files are generated but that property-picking seems to be the issue.

[RoelLeal]

I had could solve my problem changing version like Bob mentions, some like this:

npm i @material-tailwind/[email protected]

[akwasin]

I had to go down to 18.2.19 to fix this. 18.2.42 didnt solve it.

// package.json

"devDependencies": {
  ...
  "@types/react": "18.2.19"
  ...
}

[Symoh-42]

I did the following to fix the bug of material-tailwind. So I run npm i @types/[email protected] in my terminal.

[bryanlundberg]

Confirm @types/[email protected] fix it with @material-tailwind/react": "2.1.8"

I was using @material-tailwind/react": "2.1.8" "@types/react": "18.2.45",

Type problem was with Button component and some others

[irosadie]

18.2.19

this solve my problem

[javierojgs]

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?

[don-esteban]

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.

[AshwinAsp]

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?

[bryanlundberg]

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?

https://github.com/creativetimofficial/material-tailwind/issues/528#issuecomment-1930472102

[yurith-rubio]

18.2.19

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.

[akwasin]

18.2.19

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.

[terradestroyer]

is this not solved yet?

[ShortArrow]

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 solution

import 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>;
}

[Shifath472533]

For me running npm i @types/[email protected] fixed the issue. Thanks to @Symoh-42 and @bryanlundberg for the suggestions.

[mahmoudmoravej]

@types/[email protected] worked for me too but make sure your it doesn't have ^ at beginning. In other words, it should NOT be like this:

"@types/react": "^18.2.42",

[asdasfafsf]

When will it be modified?

[TiagoRaimundi]

This solve my problem thanks

[yash-bansod-2003]

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 CTRL + CLICK

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 '?' symbol in TypeScript.

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.

[ShortArrow]

Maybe adding placeholder here will solve the problem? If so, is anyone preparing to pull request?

https://github.com/creativetimofficial/material-tailwind/blob/b13e155ad0bb99a1a1d5922be0d9cbb695f5fbdb/packages/material-tailwind-react/src/components/Button/index.tsx#L56-L62

[gsabbih6]

I had to go down to 18.2.19 to fix this. 18.2.42 didnt solve it.

// package.json

"devDependencies": {
  ...
  "@types/react": "18.2.19"
  ...
}

I can confirm that this works

[don-esteban]

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.