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

[isantiago95]

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/react@2.1.5 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/react@2.1.0

[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/react@18.2.42 in my terminal.

[bryanlundberg]

Confirm @types/react@18.2.42 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

```ts 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, "placeholder">; export function Typography(props: TypographyProps) { return {props.children} ; } type ButtonProps = Omit, "placeholder">; export function Button(props: ButtonProps) { return {props.children} ; } type ButtonGroupProps = Omit, "placeholder">; export function ButtonGroup(props: ButtonGroupProps) { return {props.children} ; } type InputProps = Omit, "crossOrigin">; export function Input(props: InputProps) { return ; } type CardProps = Omit, "placeholder">; export function Card(props: CardProps) { return ; } type ListItemProps = Omit, "placeholder">; export function ListItem(props: ListItemProps) { return {props.children} ; } type ListItemPrefixProps = Omit, "placeholder">; export function ListItemPrefix(props: ListItemPrefixProps) { return {props.children} ; } type ListProps = Omit, "placeholder">; export function List(props: ListProps) { return {props.children} ; } type CardBodyProps = Omit, "placeholder">; export function CardBody(props: CardBodyProps) { return {props.children} ; } type CardFooterProps = Omit, "placeholder">; export function CardFooter(props: CardFooterProps) { return {props.children} ; } type CardHeaderProps = Omit, "placeholder">; export function CardHeader(props: CardHeaderProps) { return {props.children} ; } type DialogProps = Omit, "placeholder">; export function Dialog(props: DialogProps) { return {props.children} ; } type DialogBodyProps = Omit, "placeholder">; export function DialogBody(props: DialogBodyProps) { return {props.children} ; } type DialogFooterProps = Omit, "placeholder">; export function DialogFooter(props: DialogFooterProps) { return {props.children} ; } type DialogHeaderProps = Omit, "placeholder">; export function DialogHeader(props: DialogHeaderProps) { return {props.children} ; } type AvatarProps = Omit, "placeholder">; export function Avatar(props: AvatarProps) { return ; } type IconButtonProps = Omit, "placeholder">; export function IconButton(props: IconButtonProps) { return ; } type CheckboxProps = Omit, "crossOrigin">; export function Checkbox(props: CheckboxProps) { return ; } type DrawerProps = Omit, "placeholder">; export function Drawer(props: DrawerProps) { return {props.children} ; } type NavbarProps = Omit, "placeholder">; export function Navbar(props: NavbarProps) { return {props.children} ; } ```

[Shifath472533]

For me running npm i @types/react@18.2.42 fixed the issue. Thanks to @Symoh-42 and @bryanlundberg for the suggestions.

[mahmoudmoravej]

@types/react@18.2.42 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.

[it-ermolaev]

You don't have to downgrade @types/react versions. Just create a file material-tailwind.d.ts in the root of your project and add the code there

import MaterialTailwind from '@material-tailwind/react'

declare module '@material-tailwind/react' {
  interface ButtonProps {
    placeholder?
  }

  interface NavbarProps {
    placeholder?
  }

  interface TypographyProps {
    placeholder?
  }
}

But there is no trust in this library

[williamjkc69]

"@material-tailwind/react": "^2.1.9", "next": "^14.2.0-canary.61", "@types/react": "18.2.19", "@types/react-dom": "18.2.25", works for me!

[arteconceito]

FYI - This issue has already been tracked here.

[alvyynm]

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.

[don-esteban]

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.

[alvyynm]

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.

[ansariafrozahmed]

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) (alias) const Carousel: React.ForwardRefExoticComponent<Pick<CarouselProps, "children" | "className" | "color" | "transition" | "translate" | "slot" | "style" | "title" | "onChange" | "loop" | "onClick" | "key" | ... 253 more ... | "slideRef"> & React.RefAttributes<...>> import Carousel

I also had the same error. I was using material-tailwind library with next.js 14.

<Carousel placeholder={undefined} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}

I added this attribute now it's not showing any typescript error.

[ivanarteta]

I downgrade @types/react to v18.2.42 and it works!

[xcodeassociated]

Hi, I'm having the same issues, but downgrade @types/react to v18.2.42 DID NOT work for me!

I generated new create-react-app project with typescript, material-tailwind and tailwind css just to be sure. Can someone help? I really wanted to use this lib in my project, but I can't.