Event handlers cannot be passed to Client Component props.

[VladanIlicJS]

Summary

Can installing some packages cause this error:
"Error: Event handlers cannot be passed to Client Component props."?
It suddenly appeared in code unchanged for months

Additional information

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "dev:safe": "next dev",
    "dev:clean": "npm run clean && next dev --turbopack",
    "clean": "rimraf .next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "postinstall": "prisma generate",
    "check:deps": "depcheck",
    "check:dead": "knip --production",
    "check:types": "tsc -p tsconfig.json --noEmit",
    "clean:imports": "eslint \"src/**/*.{ts,tsx}\" --fix",
    "postbuild": "next-sitemap",
    "seo:validate": "npm run build && npm run postbuild",
    "seo:test": "lighthouse http://localhost:3000 --output=json --output-path=./lighthouse-report.json"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^2.10.0",
    "@next/third-parties": "15.5.2",
    "@polar-sh/nextjs": "^0.4.4",
    "@polar-sh/sdk": "^0.34.9",
    "@prisma/client": "^6.11.1",
    "@radix-ui/react-avatar": "^1.1.10",
    "@radix-ui/react-dialog": "^1.1.14",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-progress": "^1.1.7",
    "@radix-ui/react-radio-group": "^1.3.7",
    "@radix-ui/react-select": "^2.2.5",
    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slider": "^1.3.5",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-tabs": "^1.1.12",
    "@radix-ui/react-tooltip": "^1.2.7",
    "bcryptjs": "^3.0.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
    "gray-matter": "^4.0.3",
    "highlight.js": "^11.11.1",
    "jszip": "^3.10.1",
    "lucide-react": "^0.525.0",
    "minio": "^8.0.5",
    "next": "15.5.2",
    "next-auth": "^4.24.11",
    "next-themes": "^0.4.6",
    "openai": "^5.9.0",
    "p-limit": "^4.0.0",
    "posthog-js": "^1.260.1",
    "react": "19.1.1",
    "react-dom": "19.1.1",
    "react-dropzone": "^14.3.8",
    "react-markdown": "^10.1.0",
    "reading-time": "^1.5.0",
    "rehype-highlight": "^7.0.2",
    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.1",
    "sharp": "^0.34.3",
    "sonner": "^2.0.6",
    "tailwind-merge": "^3.3.1",
    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/minio": "^7.1.0",
    "@types/node": "^20",
    "@types/react": "19.1.12",
    "@types/react-dom": "19.1.9",
    "@types/sharp": "^0.31.1",
    "depcheck": "^1.4.6",
    "eslint": "^9",
    "eslint-config-next": "15.5.2",
    "eslint-plugin-unused-imports": "^4.1.3",
    "knip": "^5.40.6",
    "prisma": "^6.11.1",
    "tailwindcss": "^4",
    "tw-animate-css": "^1.3.5",
    "typescript": "^5"
  }
}

Error: Event handlers cannot be passed to Client Component props.
  {variant: "ghost", size: "sm", onClick: function onClick, className: ..., children: ...}
                                          ^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>) {
  digest: '846451498'
}

Example

No response

[icyJoseph]

Mm yeah, I think some checks were strengthened. How is this being used? I guess a Server Component is passing an non-server-function (formerly known as server action) to a Client Component. Could you share some snippets of the usage?