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

isantiago95 commented 11 months ago

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 commented 11 months ago

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

OG-Mihawk commented 11 months ago

Same problem on all Typography, List, Accordion etc

don-esteban commented 11 months ago

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 commented 11 months ago

@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 commented 11 months ago

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 commented 11 months ago

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

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

gurkerl83 commented 11 months ago

@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 commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

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

npm i @material-tailwind/react@2.1.0

akwasin commented 10 months ago

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 commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

18.2.19

this solve my problem

javierojgs commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

is this not solved yet?

ShortArrow commented 9 months ago

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 commented 9 months ago

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

mahmoudmoravej commented 9 months ago

@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 commented 9 months ago

When will it be modified?

TiagoRaimundi commented 9 months ago

This solve my problem thanks

yash-bansod-2003 commented 9 months ago

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

issue

Place your mouse on a button element where you see a reddish line; simply hover over the button.

step-hover

Now, press the CTRL key and click the mouse after hovering over the button. Simply press CTRL + CLICK

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

step error props

If you see something like the image above, congratulations, we have landed on the correct page

fix (1)

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 commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

"@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 commented 7 months ago

FYI - This issue has already been tracked here.

alvyynm commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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

xcodeassociated commented 5 months ago

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.

kfrankot commented 4 months ago

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

shubham43MP commented 4 months ago

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 commented 3 months ago

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

Where does this piece of code go?

solsystemlabs commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

"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 commented 2 months ago

"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(

);



![image](https://github.com/user-attachments/assets/97aee96a-65ce-4f8a-a2bb-307f40c57953)

M34R7 commented 2 months ago

"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 commented 2 months ago

"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 commented 1 month ago

18.2.19

this solve my problem

My problem solved with npm i @types/react@18.2.19

creativetimofficial / material-tailwind

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

here is an image of my code: