search

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.51k stars 306 forks source link

TypeError: Cannot read properties of null (reading 'useContext') #693

Open abhishek1025 opened 3 weeks ago

abhishek1025 commented 3 weeks ago

Environment Information:

image

Whenever I try to use any material tailwind component, I got this error.

image image

There is not any error in my old projects where i have used the material tailwind package.

EdzonBolivar11 commented 3 weeks ago

same issue

mbehzad-bhz commented 3 weeks ago

change your package.json like this :

  "dependencies": {
    "@hookform/resolvers": "^2.9.8",
    "@material-tailwind/react": "^2.0.1",
    "@popperjs/core": "^2.11.8",
    "amazon-cognito-identity-js": "^5.2.9",
    "framer-motion": "^10.12.12",
    "react": "18.2.0",
    "react-color": "^2.19.3",
    "react-currency-input-field": "^3.7.0",
    "react-day-picker": "^8.10.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.37.0",
    "react-loading-skeleton": "^3.3.1",
    "react-paginate": "^8.2.0",
    "react-redux": "^8.0.2",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",

    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "tw-bootstrap-grid-optimizer": "^1.0.2",
    "vaul": "^0.9.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
jerotrica commented 2 weeks ago

I have the same issue for me , this are my dependencies 

  "dependencies": {
    "@material-tailwind/react": "^2.1.9",
    "@remixicon/react": "^4.2.0",
    "@tremor/react": "^3.16.2",
    "axios": "^1.6.8",
    "crypto-js": "^4.2.0",
    "prop-types": "^15.8.1",
    "qr-scanner": "^1.4.2",
    "qrcode.react": "^3.1.0",
    "qrious": "^4.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "^6.23.0",
    "vaul": "^0.9.1"
  },
abidta commented 2 weeks ago

This works

This issue because mismatch of react-dom versions. @material-tailwind/react dependencies such as @floating-ui/react uses react and dom version 18.3.1. but @material-tailwind/react use react and dom version 18.2.0 . you can update this versions to 18.3.1 in package-lock.json. and reinstall all packages with npm install.

├─┬ @material-tailwind/react@2.1.9 │ ├─┬ @floating-ui/react@0.19.0 │ │ ├─┬ @floating-ui/react-dom@1.3.0 │ │ │ └── react@18.3.1 deduped │ │ └── react@18.3.1 deduped │ ├─┬ framer-motion@6.5.1 │ │ └── react@18.3.1 deduped │ ├─┬ react-dom@18.2.0 │ │ └── react@18.2.0 deduped │ └── react@18.2.0 ├─┬ react-dom@18.3.1 │ └── react@18.3.1 deduped └── react@18.3.1