reactjstypescriptnext.jsmaterial-uitailwind-css

typescript error using @material-tailwind/react with nextjs14


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,

Solution

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