Most components now require 'onPointerEnterCapture' and 'onPointerLeaveCapture'

[Deepacks]

Hello, this issue started happening today out of the blue. I did not find anything mentioning it online. Most components require those two props now, can't manage to fix it.

The typescript warning:

My package.json:

"dependencies": {
        "@apollo/client": "^3.9.7",
        "@dnd-kit/core": "^6.1.0",
        "@dnd-kit/modifiers": "^7.0.0",
        "@dnd-kit/sortable": "^8.0.0",
        "@dnd-kit/utilities": "^3.2.2",
        "@heroicons/react": "^2.1.1",
        "@material-tailwind/react": "2.1.9",
        "autoprefixer": "10.4.18",
        "axios": "^1.6.7",
        "crypto-js": "^4.2.0",
        "draft-js": "^0.11.7",
        "draft-js-export-html": "^1.4.1",
        "encoding": "^0.1.13",
        "eslint": "8.57.0",
        "eslint-config-next": "14.1.3",
        "framer-motion": "^11.0.13",
        "graphql": "^16.8.1",
        "graphql-request": "^6.1.0",
        "luxon": "^3.4.4",
        "markdown-draft-js": "^2.4.0",
        "next": "14.1.3",
        "postcss": "8.4.35",
        "react": "^18.2.0",
        "react-date-picker": "^10.6.0",
        "react-dom": "18.2.0",
        "react-hot-toast": "^2.4.1",
        "react-icons": "^5.0.1",
        "react-use": "^17.5.0",
        "sass": "^1.72.0",
        "sharp": "^0.33.2",
        "tailwindcss": "3.4.1",
        "typescript": "5.3.3",
        "zustand": "^4.5.2"
    },
    "devDependencies": {
        "@types/crypto-js": "^4.2.2",
        "@types/draft-js": "^0.11.18",
        "@types/luxon": "^3.4.2",
        "@types/markdown-draft-js": "^2.2.7",
        "@types/node": "20.11.27",
        "@types/react": "18.2.66",
        "@types/react-dom": "18.2.22"
    }

Edit

This happens only when the @types/react version is greater than 18.2.65 (at this time, latest is 18.2.66)

[phil-situmorang]

@Deepacks I have the same issue.

[phil-situmorang]

Also, I've tried different versions, but it seems like there is a dependency issue inside Material Tailwind.

[alckordev]

Hello, this issue started happening today out of the blue. I did not find anything mentioning it online. Most components require those two props now, can't manage to fix it.

The typescript warning:

My package.json:

"dependencies": {
        "@apollo/client": "^3.9.7",
        "@dnd-kit/core": "^6.1.0",
        "@dnd-kit/modifiers": "^7.0.0",
        "@dnd-kit/sortable": "^8.0.0",
        "@dnd-kit/utilities": "^3.2.2",
        "@heroicons/react": "^2.1.1",
        "@material-tailwind/react": "2.1.9",
        "autoprefixer": "10.4.18",
        "axios": "^1.6.7",
        "crypto-js": "^4.2.0",
        "draft-js": "^0.11.7",
        "draft-js-export-html": "^1.4.1",
        "encoding": "^0.1.13",
        "eslint": "8.57.0",
        "eslint-config-next": "14.1.3",
        "framer-motion": "^11.0.13",
        "graphql": "^16.8.1",
        "graphql-request": "^6.1.0",
        "luxon": "^3.4.4",
        "markdown-draft-js": "^2.4.0",
        "next": "14.1.3",
        "postcss": "8.4.35",
        "react": "^18.2.0",
        "react-date-picker": "^10.6.0",
        "react-dom": "18.2.0",
        "react-hot-toast": "^2.4.1",
        "react-icons": "^5.0.1",
        "react-use": "^17.5.0",
        "sass": "^1.72.0",
        "sharp": "^0.33.2",
        "tailwindcss": "3.4.1",
        "typescript": "5.3.3",
        "zustand": "^4.5.2"
    },
    "devDependencies": {
        "@types/crypto-js": "^4.2.2",
        "@types/draft-js": "^0.11.18",
        "@types/luxon": "^3.4.2",
        "@types/markdown-draft-js": "^2.2.7",
        "@types/node": "20.11.27",
        "@types/react": "18.2.66",
        "@types/react-dom": "18.2.22"
    }

I have the same problem, I hope they solve it soon.

[alckordev]

This is my provisional solution, in the end you should add all the components that come with this problem and redefine the unwanted properties.

// material-tailwind.d.ts
import {} from "@material-tailwind/react";

type EventCapture = {
  onPointerEnterCapture?: unknown;
  onPointerLeaveCapture?: unknown;
};

declare module "@material-tailwind/react" {
  export interface ButtonProps extends EventCapture {
    placeholder?: unknown;
  }
  export interface InputProps extends EventCapture {
    crossOrigin?: unknown;
  }
  export interface SelectProps extends EventCapture {
    placeholder?: unknown;
  }
  // more...
}

[phil-situmorang]

@alckordev looks nice. I've decided to use wrappers, but now I'm thinking that your implementation must be easier to maintain.

[Deepacks]

@alckordev @phil-situmorang I've managed to solve the issue in a different way.

It's as simple as forcing the version of the @types/react package to 18.2.65

These are my devDependencies now: Every other package is up to date except @types/react (latest is 18.2.66). Something beyond my understanding breaks when updating.

{
  "devDependencies": {
    "@types/node": "20.11.28",
    "@types/react": "18.2.65",
    "@types/react-dom": "18.2.22",
    "autoprefixer": "10.4.18",
    "eslint": "8.57.0",
    "eslint-config-next": "14.1.3",
    "postcss": "8.4.35",
    "tailwindcss": "3.4.1",
    "typescript": "5.4.2"
  }
}

[phil-situmorang]

@Deepacks thank you!

[martymh]

See the @types/react repo discussion, [@types/react] The remove of onPointerEnterCapture caused unexpected errors., for the underlying cause (and hopefully a future fix).

[Deepacks]

@martymh Thank you! It now makes a lot more sense.

So, to sort this out, material-tailwind should update its @types/react dependency.

[Deepacks]

I tried opening a PR that bumps the @types/react to the latest version across all the project, as this should solve the issue for people using the latest version of the package.

I ran material-tw locally and i saw no warnings or errors. I'll just wait and see if the maintainers accept it.

[Alwinator]

Is there any news on this issue I have the same problem? Changing the version of @types/react to 18.2.65 did not work for me unfortunately.

Update (Found a workaround): For me it works with "@types/react": "18.2.39"

[gabriofr]

Is there any news on this issue I have the same problem? Changing the version of @types/react to 18.2.65 did not work for me unfortunately.

Update (Found a workaround): For me it works with "@types/react": "18.2.39"

Thank you! Works wonders :)

[ilia-os]

The latest working version of @types/react is 18.2.65 In my case I had to also add

  "resolutions": {
    "@types/react": "18.2.65"
  },

to my package.json, in order for dependencies to also use this version

[yokiizx]

Is there any news on this issue I have the same problem? Changing the version of @types/react to 18.2.65 did not work for me unfortunately.

Update (Found a workaround): For me it works with "@types/react": "18.2.39"

same with you