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

[tarifalhasan]

getting this error in react typescript

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

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 ( <Menu> <MenuHandler> <IconButton variant="text"> <BellIcon className="h-5 text-skin-gray-500 w-5" /> </IconButton> </MenuHandler> <MenuList className="flex flex-col gap-2"> <MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2"> <Avatar variant="circular" alt="candice wu" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" /> <div className="flex flex-col gap-1"> <Typography variant="small" color="gray" className="font-normal"> <span className="font-medium text-blue-gray-900">Wu send you a message </Typography> <Typography variant="small" className="flex items-center gap-1 text-xs text-gray-600" > <ClockIcon className="h-3 w-3" /> 13 minutes ago </Typography> </MenuItem> <MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2"> <Avatar variant="circular" alt="natali craig" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80" /> <div className="flex flex-col gap-1"> <Typography variant="small" color="gray" className="font-normal"> <span className="font-medium text-blue-gray-900">Natali{' '} reply to your email </Typography> <Typography variant="small" className="flex items-center gap-1 text-xs text-gray-600" > <ClockIcon className="h-3 w-3" />a hour ago </Typography> </MenuItem> <MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2"> <Avatar variant="circular" alt="paypal" src="https://dwglogo.com/wp-content/uploads/2016/08/PayPal_Logo_Icon.png" /> <div className="flex flex-col gap-1"> <Typography variant="small" color="gray" className="font-normal"> <span className="font-medium text-blue-gray-900">PayPal{' '} you've received a payment. </Typography> <Typography variant="small" className="flex items-center gap-1 text-xs text-gray-600" > <ClockIcon className="h-3 w-3" />5 hours ago </Typography> </MenuItem> </MenuList> </Menu> ); }

[RobertjanTuit]

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

[RobertjanTuit]

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]

the problem was my vite setting

[MuhammedZohaib]

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

[blakemulnix]

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]

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.