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

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

About this issue

Original URL
State: open
Created 7 months ago
Reactions: 22
Comments: 33

Commits related to this issue

chore(dependency): set @types/react to 18.2.46 to solve material tailwind typing issue. See https://github.com/creativetimofficial/material-tailwind/issues/528 — committed to dopey2/next-js-ssg-hybrid-routing by dopey2 5 months ago
Update package.json Confirm https://github.com/creativetimofficial/material-tailwind/issues/528 ix it — committed to NPJigaK/twitch-follower-checker by NPJigaK 5 months ago

Most upvoted comments

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 😃

+33

BobDotCom on Dec 14, 2023

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

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

+23

rafaelvieiras on Dec 14, 2023

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.

+10

don-esteban on Mar 19, 2024

I did the following to fix the bug of material-tailwind. So I run npm i @types/react @18.2.42 in my terminal.

Symoh-42 on Jan 23, 2024

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

gurkerl83 on Dec 17, 2023

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

it-ermolaev on Mar 20, 2024

@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. 😄

rafaelvieiras on Dec 14, 2023

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

willfolsom on Dec 13, 2023

"@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!

williamjkc69 on Apr 18, 2024

Same problem on all Typography, List, Accordion etc

OG-Mihawk on Dec 13, 2023

@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",

mahmoudmoravej on Feb 25, 2024

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

bryanlundberg on Feb 13, 2024

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

Shifath472533 on Feb 24, 2024

is this not solved yet?

terradestroyer on Feb 22, 2024

18.2.19

this solve my problem

irosadie on Feb 7, 2024

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"
  ...
}

akwasin on Jan 17, 2024

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

don-esteban on Dec 13, 2023

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

gsabbih6 on Mar 16, 2024

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.

akwasin on Feb 15, 2024

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

npm i @material-tailwind/react@2.1.0

RoelLeal on Jan 10, 2024