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,

Smorgasbord

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.

Kirstinkirstyn

Indeed it works with "@material-tailwind/react": "^2.1.10", and "@types/react": "18.2.42", Thanks a lot!!! – Goldstone

Answer 2

In my case using React with Vite + Typescript was a problem of @vitejs/plugin-react-swc so consider using @vitejs/plugin-react instead.

My package.json looks like:

"devDependencies": {
    ...
    "@vitejs/plugin-react": "^4.3.2",
    ...
}

In vite.config.ts

import react from '@vitejs/plugin-react'

Bernardobernarr

Answer 3

Try to install a dependance of @material-tailwind :

npm i @types/[email protected]

Lessard