creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.72k stars 316 forks source link

Type '{ children: Element[]; className: string; }' is missing the following properties from type 'Pick<MenuItemProps & ButtonHTMLAttributes<HTMLButtonElement>, "type" | "key" | "id" | "name" | "color" | "translate" | ... 262 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture #379

Open tarifalhasan opened 1 year ago

tarifalhasan commented 1 year ago

getting this error in react typescript

Type '{ children: Element[]; className: string; }' is missing the following properties from type 'Pick<MenuItemProps & ButtonHTMLAttributes, "type" | "key" | "id" | "name" | "color" | "translate" | ... 262 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture

import React from 'react'; import { Menu, MenuHandler, MenuList, MenuItem, IconButton, Avatar, Typography, } from '@material-tailwind/react'; import { BellIcon } from '@heroicons/react/24/solid'; import { ClockIcon } from '@heroicons/react/24/outline';

export default function NotificationMenu() { return (

Wu send you a message 13 minutes ago
Natali{' '} reply to your email a hour ago
PayPal{' '} you've received a payment. 5 hours ago
); }
RobertjanTuit commented 1 year ago

I am having the same issue, anyone who can help me get past this?

RobertjanTuit commented 1 year ago

Ok, was able to resolve by upgrading all my other packages to latest, going to assume a later Typescript was the fix? But maybe some of the other dependencies were it too, did not have time to check :) FYI @tarifalhasan

tarifalhasan commented 1 year ago

the problem was my vite setting

MuhammedZohaib commented 1 year ago

Facing the same issue can you specify what was the problem and solution in the vite.config.ts

blakemulnix commented 1 year ago

It seems to be a version issue to me but I am not entirely sure. This error went away using the following versions:

"dependencies": {
    "@heroicons/react": "^2.0.18",
    "@material-tailwind/react": "latest",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.9.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.9",
    "typescript": "^5.1.6",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4"
  }
HendryXX1 commented 1 year ago

In my case I only had to update update typescript to 5.2.2, React to 18.2.0, and @types/react to 18.2.21.