typescript error using @material-tailwind/react with nextjs14

Question

trying to use "@material-tailwind/react": "^2.1.9" in "next": "14.1.4"

"use client";
import { Button } from "@material-tailwind/react";

export default function Home() {
  return <Button>Test MUI</Button>;
}

but the button is showing a red squiggly line with error

Type '{ children: string; }' is missing the following properties from type 'Pick<ButtonProps, "children" | "color" | "disabled" | "translate" | "form" | "slot" | "style" | "title" | "onChange" | "onClick" | "className" | "value" | "key" | "autoFocus" | ... 259 more ... | "loading">': placeholder, onPointerEnterCapture,

Answer 1

I have the same issue working on React with Vite + Typescript, i'm using Node 20.12.1.

I found the solution here: https://github.com/creativetimofficial/material-tailwind/issues/528 the problem is in the new versions of @react/types package.

If you downgrade should be fixed. do this:

1. Delete your node_modules folder and package-lock.json
2. Manually, on your package.json, replace the version of @types/react to "18.2.42" (Be aware to not include the ^ symbol, if you keep it will not work).
3. reinstall the dependencies with npm install.

I also read some cases where 18.2.42 won't work, if happens to you try the 18.2.19 version.