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

isantiago95 · 2023-12-11T00:15:59Z

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

The text was updated successfully, but these errors were encountered:

willfolsom · 2023-12-13T01:44:19Z

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

OG-Mihawk · 2023-12-13T11:25:13Z

Same problem on all Typography, List, Accordion etc

don-esteban · 2023-12-13T21:52:35Z

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 · 2023-12-14T17:51:22Z

@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 · 2023-12-14T18:10:49Z

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 · 2023-12-14T18:21:49Z

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

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

gurkerl83 · 2023-12-17T16:52:27Z

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

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

Thx!

MarceloViannaDev · 2023-12-18T20:50:50Z

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 · 2023-12-20T17:48:22Z

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 · 2024-01-10T16:23:12Z

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

npm i @material-tailwind/[email protected]

akwasin · 2024-01-17T18:56:50Z

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

…wind typing issue. See creativetimofficial/material-tailwind#528

Symoh-42 · 2024-01-23T07:43:00Z

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

bryanlundberg · 2024-02-06T17:54:17Z

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 · 2024-02-07T11:27:35Z

18.2.19

this solve my problem

javierojgs · 2024-02-09T22:56:03Z

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 · 2024-02-10T08:47:12Z

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.

Confirm creativetimofficial/material-tailwind#528 ix it

AshwinAsp · 2024-02-13T11:31:08Z

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 · 2024-02-13T13:40:46Z

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?

#528 (comment)

yurith-rubio · 2024-02-15T14:17:18Z

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 · 2024-02-15T15:47:00Z

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 · 2024-02-22T03:15:12Z

is this not solved yet?

alvyynm · 2024-05-08T18:52:42Z

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 · 2024-05-09T15:59:50Z

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 · 2024-06-12T11:04:49Z

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

xcodeassociated · 2024-06-18T21:27:08Z

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.

Looks like there's a bug with recent version of react/types, that causes valid Typescript to fail with some React components. This was failing builds with my install stepper UI changes. Pinning to the last working version, as recommended in the github issue that's tracking the bug, appears to have solved the problem for me. creativetimofficial/material-tailwind#528

Looks like there's a bug with recent version of @types/react, that causes valid Typescript to fail with some React components. This was failing builds with my install stepper UI changes. Pinning to the last working version, as recommended in the github issue , appears to have solved the problem for me. creativetimofficial/material-tailwind#528

* feat: render input groups Render input groups as form fieldsets. Doesn't look great, though. Going to take a pass at a better UX. * feat: add Accordion component and use for input groups If you have a lot of inputs, having groups can help organize them on the screen, but it also pads the list out and makes them even longer. This PR adds an Accordion component, then uses it to display the groups. The customer can view one group at a time (or open them all if they want to.) * feat: install material tailwind Mainly to use their stepper component. * feat: basic install stepper ui * feat: update and reprovision if install has been created * feat: basic install status view * feat: layout and styles * refactor: clean up file organization * fix: pin to last working version of react/types Looks like there's a bug with recent version of @types/react, that causes valid Typescript to fail with some React components. This was failing builds with my install stepper UI changes. Pinning to the last working version, as recommended in the github issue , appears to have solved the problem for me. creativetimofficial/material-tailwind#528 * fix: typescript build errors * feat: add component redeploy step to install update * fix: more readable form field spacing * fix: handle null input groups * fix: stop throwing errors With the error message component set up, we can return all errors and display them to the user. * refactor: remove console logs * refactor: decompose stepper into smaller components * feat: poll less often 10 seconds should more frequent enough * refactor: group install status components together * fix: install button loading state correct layout * feat: can close error messages * fix: use correct card component for company step * fix: add missing iterator key * fix: type errors

creativetimofficial/material-tailwind#528 creativetimofficial/material-tailwind#427

kfrankot · 2024-07-30T00:23:15Z

I don't think anyone needs to downgrade @types/react or override individual component type definitions. The source of the issue is the change to the HTMLAttributes definition in @types/react. To keep the latest version of @types/react and avoid overriding many components, just do this instead:

import React from 'react'

declare module 'react' {
  interface HTMLAttributes {
    placeholder?: string
    onPointerEnterCapture?: React.PointerEventHandler
    onPointerLeaveCapture?: React.PointerEventHandler
  }
}

* feat(home): completed Home page * Genres list (#10) * profile-page * GenresList Complete * rework GenresList * fix(home): genre list --------- Co-authored-by: shifinmalik <[email protected]> Co-authored-by: Muhammed-Rahif <[email protected]> * fix(getting-started): carousel replaced with material-tailwind * fix(material-tailwind): version types issue creativetimofficial/material-tailwind#528 creativetimofficial/material-tailwind#427 * fix: file change from js/jsx to ts/tsx * fix(home): header carousel * fix(home): ui * fix(home): ui update --------- Co-authored-by: shifinmalik <[email protected]> Co-authored-by: shifinmalik <[email protected]> Co-authored-by: Muhammed-Rahif <[email protected]>

shubham43MP · 2024-08-02T11:04:29Z

Seems something broken at @types/react
All going good with these versions:
"@material-tailwind/react": "^2.1.9",
"@types/react": "18.2.42"

No Redflags anymore:

maxatrumbella · 2024-08-10T13:39:08Z

declare module 'react' {
interface HTMLAttributes {
placeholder?: string
onPointerEnterCapture?: React.PointerEventHandler
onPointerLeaveCapture?: React.PointerEventHandler
}
}

Where does this piece of code go?

solsystemlabs · 2024-08-19T00:17:42Z

Seems something broken at @types/react All going good with these versions: "@material-tailwind/react": "^2.1.9", "@types/react": "18.2.42"

No Redflags anymore:

Looks like Input still doesn't work even with this @types/react version.

xxxklatexxx · 2024-09-04T12:32:11Z

declare module 'react' {
interface HTMLAttributes {
placeholder?: string
onPointerEnterCapture?: React.PointerEventHandler
onPointerLeaveCapture?: React.PointerEventHandler
}
}

Where does this piece of code go?

create a file inside the src folder called react-app-env.d.ts. tried it and the error was gone but I'm still checking if everything works.

I'm also new in react tailwind so feel free to correct me.

drsanwujiang · 2024-09-05T09:22:10Z

declare module 'react' {
interface HTMLAttributes {
placeholder?: string
onPointerEnterCapture?: React.PointerEventHandler
onPointerLeaveCapture?: React.PointerEventHandler
}
}

Where does this piece of code go?

create a file inside the src folder called react-app-env.d.ts. tried it and the error was gone but I'm still checking if everything works.

I'm also new in react tailwind so feel free to correct me.

Usually just put it in the root directory, since another .d.ts file - next-env.d.ts is also there.

muratferdi · 2024-09-10T07:42:50Z

"dependencies": {
"@material-tailwind/react": "^2.1.10",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.9.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.9.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.45",
"tailwindcss": "^3.4.10",
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.1",
"vite": "^5.4.1"
}

in vite-env.d.ts file

///
declare module "react" {
interface HTMLAttributes {
placeholder?: string;
onPointerEnterCapture?: React.PointerEventHandler;
onPointerLeaveCapture?: React.PointerEventHandler;
}
}

fixed ! thanks

ydj515 · 2024-09-11T02:14:49Z

"dependencies": { "@material-tailwind/react": "^2.1.10", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "eslint": "^9.9.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.4.45", "tailwindcss": "^3.4.10", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", "vite": "^5.4.1" }

in vite-env.d.ts file

/// declare module "react" { interface HTMLAttributes { placeholder?: string; onPointerEnterCapture?: React.PointerEventHandler; onPointerLeaveCapture?: React.PointerEventHandler; } }

fixed ! thanks

I configured it as below. but, still not working.... is wrong...? plz help me..

node v20.11.0

package.json

{
  "name": "react-sample",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@material-tailwind/react": "^2.1.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.45",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

vite-env.d.ts

/// <reference types="vite/client" />
declare module "react" {
  interface HTMLAttributes {
    placeholder?: string;
    onPointerEnterCapture?: React.PointerEventHandler;
    onPointerLeaveCapture?: React.PointerEventHandler;
  }
}

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>
);

M34R7 · 2024-09-18T06:27:28Z

"dependencies": { "@material-tailwind/react": "^2.1.10", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "eslint": "^9.9.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.4.45", "tailwindcss": "^3.4.10", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", "vite": "^5.4.1" }
в файле vite-env.d.ts
/// объявляем модуль "реакция" { interface HTMLAttributes { placeholder?: string; onPointerEnterCapture?: React.PointerEventHandler; onPointerLeaveCapture?: React.PointerEventHandler; } }
исправлено! спасибо

Я настроил его, как указано ниже. Но все равно не работает.... что-то не так...? Пожалуйста, помогите мне..

узел v20.11.0

пакет.json
{
  "name": "react-sample",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@material-tailwind/react": "^2.1.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.45",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}
vite-env.d.ts
/// <reference types="vite/client" />
declare module "react" {
  interface HTMLAttributes {
    placeholder?: string;
    onPointerEnterCapture?: React.PointerEventHandler;
    onPointerLeaveCapture?: React.PointerEventHandler;
  }
}
основной.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>
);

I encountered the same issue when I tried using @vitejs/plugin-react-swc. If you replace it with @vitejs/plugin-react, the issue will go away. However, considering this issue, as well as the type problems and the slow response from the developer, it seems that using @material-tailwind/react right now is not the best idea.

ydj515 · 2024-09-19T01:48:03Z

"dependencies": { "@material-tailwind/react": "^2.1.10", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "eslint": "^9.9.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.4.45", "tailwindcss": "^3.4.10", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", "vite": "^5.4.1" }
в файле vite-env.d.ts
/// объявляем модуль "реакция" { interface HTMLAttributes { placeholder?: string; onPointerEnterCapture?: React.PointerEventHandler; onPointerLeaveCapture?: React.PointerEventHandler; } }
исправлено! спасибо

Я настроил его, как указано ниже. Но все равно не работает.... что-то не так...? Пожалуйста, помогите мне..
узел v20.11.0

пакет.json
{
  "name": "react-sample",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@material-tailwind/react": "^2.1.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.45",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}
vite-env.d.ts
/// <reference types="vite/client" />
declare module "react" {
  interface HTMLAttributes {
    placeholder?: string;
    onPointerEnterCapture?: React.PointerEventHandler;
    onPointerLeaveCapture?: React.PointerEventHandler;
  }
}
основной.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>
);
I encountered the same issue when I tried using @vitejs/plugin-react-swc. If you replace it with @vitejs/plugin-react, the issue will go away. However, considering this issue, as well as the type problems and the slow response from the developer, it seems that using @material-tailwind/react right now is not the best idea.

@M34R7 thx your reply. you gave me a great answer.. thank you 👍

lingabo · 2024-10-28T13:48:13Z

18.2.19

this solve my problem

My problem solved with npm i @types/[email protected]

My old solution of pinning types/react to 18.2.19 isn't the best. Better to update to the new version, and use a patch of code to fix the broken parts. For reference, see creativetimofficial/material-tailwind#528

* build(deps): update to next.js 15 with codemod * chore: reconfigure eslint * fix: fix eslint issues * fix: temporary fix for types/react My old solution of pinning types/react to 18.2.19 isn't the best. Better to update to the new version, and use a patch of code to fix the broken parts. For reference, see creativetimofficial/material-tailwind#528 * Revert "chore: reconfigure eslint" This reverts commit 2aaf4c1. * Revert "fix: fix eslint issues" This reverts commit eab9d7f. * Revert "fix: temporary fix for types/react" This reverts commit d3ebe02.

…ment)

niloo-maleki · 2024-12-21T11:54:44Z

I encountered the same issue where @types/react version 18.2.42 caused compatibility problems with certain components, especially Input.

To fix this, I downgraded to version 18.2.19, which resolved the issue for now. However, this is more of a temporary solution, and the root cause should be investigated for a proper fix.

// package.json

"devDependencies": {
...
"@material-tailwind/react": "^2.1.10",
"@types/react": "18.2.19"
...
}

BobDotCom mentioned this issue Dec 14, 2023

chore(deps-dev): bump @types/react from 18.2.19 to 18.2.45 BobDotCom/oprf-rank-viewer#12

Closed

don-esteban mentioned this issue Dec 18, 2023

"{ children: Element; className: string; key: any; } attribute "placeholder" is missing in "placeholder" #535

Closed

javiertury mentioned this issue Dec 21, 2023

Outdated type definitions hupe1980/gatsby-theme-material-ui#111

Open

don-esteban mentioned this issue Dec 25, 2023

Components requesting placeholder prop after the latest update #547

Closed

tihuan mentioned this issue Jan 3, 2024

chore: 5396 Upgrade to React 18 chanzuckerberg/single-cell-data-portal#6406

Merged

3 tasks

pawelgrimm mentioned this issue Jan 12, 2024

fix: Explicitly omit crossOrigin and placeholder props Doist/reactist#812

Merged

6 tasks

dopey2 added a commit to dopey2/next-js-ssg-hybrid-routing that referenced this issue Jan 20, 2024

chore(dependency): set @types/react to 18.2.46 to solve material tail…

9a7379e

…wind typing issue. See creativetimofficial/material-tailwind#528

slhck mentioned this issue Feb 4, 2024

Property 'placeholder' is missing in IconButton #585

Closed

NPJigaK added a commit to NPJigaK/twitch-follower-checker that referenced this issue Feb 11, 2024

Update package.json

b6c88ec

Confirm creativetimofficial/material-tailwind#528 ix it

MeowDevoteam mentioned this issue May 13, 2024

Tooltip: исправить типизацию consta-design-system/uikit#3655

Closed

Muhammed-Rahif added a commit to Muhammed-Rahif/The-Movieflix that referenced this issue Jul 27, 2024

fix(material-tailwind): version types issue

f760f60

creativetimofficial/material-tailwind#528 creativetimofficial/material-tailwind#427

Muhammed-Rahif added a commit to Muhammed-Rahif/The-Movieflix that referenced this issue Jul 28, 2024

fix(material-tailwind): version types issue

4a810f4

creativetimofficial/material-tailwind#528 creativetimofficial/material-tailwind#427

matthewsia98 added a commit to SEG4900-Capstone-Group-T88/AdSpot-Client that referenced this issue Nov 7, 2024

downgrade @types/react creativetimofficial/material-tailwind#528 (com…

16ba275

…ment)

sbs1253 mentioned this issue Nov 11, 2024

[🐛 bug]트러블슈팅 - material-tailwind type error sbs1253/stelmusic#10

Open

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

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

Comments

isantiago95 commented Dec 11, 2023

here is an image of my code:

willfolsom commented Dec 13, 2023 • edited Loading

OG-Mihawk commented Dec 13, 2023

don-esteban commented Dec 13, 2023 • edited Loading

rafaelvieiras commented Dec 14, 2023

BobDotCom commented Dec 14, 2023 • edited Loading

rafaelvieiras commented Dec 14, 2023

gurkerl83 commented Dec 17, 2023

MarceloViannaDev commented Dec 18, 2023

YassBaer commented Dec 20, 2023 • edited Loading

RoelLeal commented Jan 10, 2024 • edited Loading

akwasin commented Jan 17, 2024 • edited Loading

Symoh-42 commented Jan 23, 2024

bryanlundberg commented Feb 6, 2024 • edited Loading

irosadie commented Feb 7, 2024

javierojgs commented Feb 9, 2024

don-esteban commented Feb 10, 2024

AshwinAsp commented Feb 13, 2024

bryanlundberg commented Feb 13, 2024

yurith-rubio commented Feb 15, 2024

akwasin commented Feb 15, 2024

terradestroyer commented Feb 22, 2024

alvyynm commented May 8, 2024

ansariafrozahmed commented May 9, 2024

ivanarteta commented Jun 12, 2024

xcodeassociated commented Jun 18, 2024

kfrankot commented Jul 30, 2024

shubham43MP commented Aug 2, 2024 • edited Loading

maxatrumbella commented Aug 10, 2024

solsystemlabs commented Aug 19, 2024 • edited Loading

xxxklatexxx commented Sep 4, 2024 • edited Loading

drsanwujiang commented Sep 5, 2024

muratferdi commented Sep 10, 2024

ydj515 commented Sep 11, 2024

M34R7 commented Sep 18, 2024

ydj515 commented Sep 19, 2024

lingabo commented Oct 28, 2024

niloo-maleki commented Dec 21, 2024

willfolsom commented Dec 13, 2023 •

edited

Loading

don-esteban commented Dec 13, 2023 •

edited

Loading

BobDotCom commented Dec 14, 2023 •

edited

Loading

YassBaer commented Dec 20, 2023 •

edited

Loading

RoelLeal commented Jan 10, 2024 •

edited

Loading

akwasin commented Jan 17, 2024 •

edited

Loading

bryanlundberg commented Feb 6, 2024 •

edited

Loading

shubham43MP commented Aug 2, 2024 •

edited

Loading

solsystemlabs commented Aug 19, 2024 •

edited

Loading

xxxklatexxx commented Sep 4, 2024 •

edited

Loading