material-tailwind TypeError: Cannot read properties of null (reading 'useContext')

Environment Information:

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

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

Jun 03 '24 04:06 abhishek1025

same issue

Jun 04 '24 02:06 EdzonBolivar11

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"
  },

Jun 08 '24 08:06 mbehzad-bhz

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"
  },

Jun 10 '24 18:06 jerotrica

This works (Not recommended)

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/[email protected] │ ├─┬ @floating-ui/[email protected] │ │ ├─┬ @floating-ui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]

Jun 11 '24 10:06 abidta

I tried changing react-dom,react,react-router-dom version but still no solution i still get "Cannot read properties of null (reading 'useContext') " { "name": "store", "version": "0.1.0", "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "@fortawesome/fontawesome-svg-core": "^6.5.2", "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.4", "@material-tailwind/react": "^2.1.9", "@tailwindcss/forms": "^0.5.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "autoprefixer": "^10.4.19", "axios": "^1.6.8", "flowbite": "^2.4.1", "flowbite-react": "^0.9.0", "lodash": "^4.17.21", "postcss": "^8.4.38", "react": "^18.3.1", "react-auth-kit": "^3.1.3", "react-dom": "^18.3.1", "react-icons": "^5.2.1", "react-pro-sidebar": "^1.1.0", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", "react-toastify": "^10.0.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@tailwindcss/aspect-ratio": "^0.4.2", "tailwindcss": "^3.4.4" } }

Jun 29 '24 19:06 ussam-dri

Version 2.0.5 worked for me

Link: https://www.material-tailwind.com/docs/react/release-notes#v2.0.5

Jul 04 '24 06:07 raja-sultan

I tried changing react-dom,react,react-router-dom version but still no solution i still get "Cannot read properties of null (reading 'useContext') " { "name": "store", "version": "0.1.0", "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "@fortawesome/fontawesome-svg-core": "^6.5.2", "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.4", "@material-tailwind/react": "^2.1.9", "@tailwindcss/forms": "^0.5.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "autoprefixer": "^10.4.19", "axios": "^1.6.8", "flowbite": "^2.4.1", "flowbite-react": "^0.9.0", "lodash": "^4.17.21", "postcss": "^8.4.38", "react": "^18.3.1", "react-auth-kit": "^3.1.3", "react-dom": "^18.3.1", "react-icons": "^5.2.1", "react-pro-sidebar": "^1.1.0", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", "react-toastify": "^10.0.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@tailwindcss/aspect-ratio": "^0.4.2", "tailwindcss": "^3.4.4" } }

You should change @material-tailwind/react version in package-lock.json instead of package.json

Jul 04 '24 06:07 abidta

This is my package-lock.json

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/[email protected] │ ├─┬ @floating-ui/[email protected] │ │ ├─┬ @floating-ui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]

I Tried this. I update package-lock.json

"node_modules/@floating-ui/react": { "version": "0.19.0", "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz", "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==", "license": "MIT", "dependencies": { "@floating-ui/react-dom": "^1.3.0", "aria-hidden": "^1.1.3", "tabbable": "^6.0.1" }, "peerDependencies": { "react": ">=18.3.1", "react-dom": ">=18.3.1" } }, "node_modules/@floating-ui/react-dom": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz", "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==", "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.2.1" }, "peerDependencies": { "react": ">=18.3.1", "react-dom": ">=18.3.1" } },

My package.json is 

`{

"name": "userend", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev -p 3001", "build": "next build", "start": "next start -p 3001", "lint": "next lint" }, "dependencies": { "@greatsumini/react-facebook-login": "^3.3.3", "@iconify/react": "^4.1.1", "@material-tailwind/react": "2.1.9", "@react-oauth/google": "^0.11.1", "@tailwindcss/line-clamp": "^0.4.4", "@types/node": "20.8.2", "@types/react": "18.2.25", "@types/react-dom": "18.2.11", "@types/react-outside-click-handler": "^1.3.3", "embla-carousel": "^8.1.5", "embla-carousel-autoplay": "^8.1.5", "embla-carousel-react": "^8.1.5", "graphql": "^16.8.2", "lightbox.js-react": "^0.9.9", "moment": "^2.30.1", "next": "14.2.4", "next-base64": "^1.1.0", "otp-timer-ts": "^3.0.1", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.52.0", "react-images-uploading": "^3.1.7", "react-instantsearch": "^7.11.1", "react-instantsearch-router-nextjs": "^7.11.1", "react-otp-input": "^3.1.1", "react-outside-click-handler": "^1.3.0", "react-player": "^2.16.0", "react-s3-typescript": "^2.4.1", "react-share": "^4.4.1", "react-timer-hook": "^3.0.7", "rodal": "^2.1.0", "sharp": "^0.33.4", "slugify": "^1.6.6", "tailwind-scrollbar": "^3.1.0", "typescript": "5.2.2", "typesense": "^1.8.2", "typesense-instantsearch-adapter": "^2.8.0", "urql": "^4.1.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "18.2.19", "@types/react-dom": "18.2.25", "eslint": "^8", "eslint-config-next": "14.2.4", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "5.2.2" } } ` `` It is very frustration for me please help.

Jul 08 '24 19:07 naimulemon

but @material-tailwind/react use react and dom version 18.2.0 .

Then the React version should simply be updated in this project, no?

Jul 10 '24 18:07 slhck

Version 2.0.5 worked for me

this worked for me! thanks

Jul 11 '24 15:07 kylegendy

@naimulemon you change @material-tailwind/react dependency version in package-lock.json not @floating-ui/react dependancy.

 "node_modules/@material-tailwind/react": {
      "version": "2.1.9",
      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
      "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
      "dependencies": {
        "@floating-ui/react": "0.19.0",
        "classnames": "2.3.2",
        "deepmerge": "4.2.2",
        "framer-motion": "6.5.1",
        "material-ripple-effects": "2.0.1",
        "prop-types": "15.8.1",
        "react": "18.2.0", // change this version to 18.3.1
        "react-dom": "18.2.0", // change this version to 18.3.1
        "tailwind-merge": "1.8.1"
      },

Jul 12 '24 10:07 abidta

Suggestions to change package-lock.json are not viable for build processes - I ended up downgrading like another user suggested to version 2.0.5 and it worked. To me this is a serious bug. It happened specifically while importing PopOver component when I removed that it worked fine using latest version of material-tailwind react but I'm not sure why some components user different versions of React

Jul 24 '24 16:07 jdaly13

If you're using NPM, you can include in your package.json:

  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }

To force the version of react/react-dom universally, no matter what your dependencies want.

Jul 27 '24 16:07 27pchrisl

downgrading the version of @material-tailwind/react to 2.0.5 worked for me. No other solution worked.

Jul 28 '24 06:07 truly-indian

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/[email protected] │ ├─┬ @floating-ui/[email protected] │ │ ├─┬ @floating-ui/[email protected] │ │ │ └── [email protected] deduped │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]

Jul 28 '24 08:07 rajaasim4

I just override the react version it works.

{ "name": "my-project", "version": "0.1.0", "private": true, "dependencies": { "@heroicons/react": "^2.1.5", "@material-tailwind/react": "^2.1.9", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "my-project": "file:", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "tailwindcss": "^3.4.7" }, "overrides": { "react": "^18.3.1", "react-dom": "^18.3.1" } }

Aug 05 '24 09:08 SoumyaSubhrajit

same issue and this is my package.json "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-transform-async-generator-functions": "^7.23.7", "@babel/plugin-transform-class-properties": "^7.23.3", "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4", "@babel/plugin-transform-numeric-separator": "^7.23.4", "@babel/plugin-transform-object-rest-spread": "^7.23.4", "@babel/plugin-transform-optional-catch-binding": "^7.23.4", "@babel/plugin-transform-optional-chaining": "^7.23.4", "@fullcalendar/bootstrap": "^6.1.8", "@fullcalendar/bootstrap5": "^6.1.9", "@fullcalendar/core": "^6.1.9", "@fullcalendar/daygrid": "^6.1.8", "@fullcalendar/interaction": "^6.1.8", "@fullcalendar/list": "^6.1.8", "@fullcalendar/react": "^6.1.8", "@fullcalendar/resource": "^6.1.8", "@fullcalendar/resource-timeline": "^6.1.8", "@fullcalendar/rrule": "^6.1.8", "@fullcalendar/timegrid": "^6.1.8", "@headlessui/react": "^1.7.12", "@material-tailwind/react": "^2.1.4", "@paypal/react-paypal-js": "^7.8.3", "@react-google-maps/api": "^2.18.1", "@react-pdf-viewer/core": "^3.12.0", "@stripe/react-stripe-js": "^2.6.2", "@stripe/stripe-js": "^2.4.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/i18next": "^13.0.0", "@types/i18next-xhr-backend": "^1.4.2", "@types/jest": "^27.5.2", "@types/node": "^17.0.45", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@types/react-router-dom": "^5.3.3", "axios": "^1.3.4", "firebase": "^10.12.1", "html-to-image": "^1.11.11", "html2canvas": "^1.4.1", "html2pdf.js": "^0.10.1", "i18next": "^23.7.16", "i18next-browser-languagedetector": "^7.2.0", "i18next-http-backend": "^2.4.2", "i18next-xhr-backend": "^3.2.2", "js-cookie": "^3.0.1", "jspdf": "^2.5.1", "jwt-decode": "^3.1.2", "qrcode.react": "^3.1.0", "react": "^18.2.0", "react-calendar": "^4.0.0", "react-dom": "^18.2.0", "react-feather": "^2.0.10", "react-i18next": "^14.0.0", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "react-select": "^5.7.4", "react-slick": "^0.29.0", "react-to-pdf": "^1.0.1", "react-toastify": "^9.1.3", "reactstrap": "^9.2.0", "slick-carousel": "^1.8.1", "socket.io-client": "^4.7.4", "stripe": "^13.4.0", "use-sound": "^4.0.1", "web-vitals": "^2.1.4", "workbox-background-sync": "^6.5.4", "workbox-broadcast-update": "^6.5.4", "workbox-cacheable-response": "^6.5.4", "workbox-core": "^6.5.4", "workbox-expiration": "^6.5.4", "workbox-google-analytics": "^6.5.4", "workbox-navigation-preload": "^6.5.4", "workbox-precaching": "^6.5.4", "workbox-range-requests": "^6.5.4", "workbox-routing": "^6.5.4", "workbox-strategies": "^6.5.4", "workbox-streams": "^6.5.4", "zustand": "^4.3.7" },

Aug 13 '24 12:08 myratoun

bug still happening upto today whose gonna save the world

Sep 01 '24 08:09 bloodykheeng

Still getting it to this day. Running it with the latest and greatest Remix version.

Sep 19 '24 06:09 andrefox333

I resolved this issue by following these steps.

find the keyword "node_modules/@material-tailwind/react" in your project's package-lock, the dependencies should exactly match the same versions mentioned, update your dependencies will resolve the issue.

1136778E-D8E3-40F5-9285-FF170738626D

Sep 25 '24 15:09 ansafans

I resolved this issue by following these steps.

find the keyword "node_modules/@material-tailwind/react" in your project's package-lock, the dependencies should exactly match the same versions mentioned, update your dependencies will resolve the issue.

I'm not sure why so many people are suggesting to update package-lock.json file, this file is not meant to be edited, it will lead to inconsistencies and conflicts and particularly not useful for build processes that do a fresh install.

Sep 25 '24 16:09 jdaly13

If you're using NPM, you can include in your package.json:
  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
To force the version of react/react-dom universally, no matter what your dependencies want.

This worked for me. Thanks!

Oct 06 '24 15:10 allenbaby

If you're using NPM, you can include in your package.json:
  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
To force the version of react/react-dom universally, no matter what your dependencies want.
This worked for me. Thanks!

Oct 07 '24 14:10 PiyushPb

If you're using NPM, you can include in your package.json:
  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
To force the version of react/react-dom universally, no matter what your dependencies want.

Isso funcionou para mim também. Obrigado @27pchrisl .

Oct 21 '24 02:10 luciocarvalho10

If you're using NPM, you can include in your package.json:
  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
To force the version of react/react-dom universally, no matter what your dependencies want.

nice job, is worked.

Oct 25 '24 08:10 juilletVent

Just coming here to say that if you are using yarn, you need to use resolutions instead of overrides.

Also, it's a shame that this is still not fixed from the package itself. Why don't they use peer dependencies?!

Mar 28 '25 12:03 slhck

If you're using NPM, you can include in your package.json: "overrides": { "react": "^18.3.1", "react-dom": "^18.3.1" }

To force the version of react/react-dom universally, no matter what your dependencies want.

This worked for me. Thanks!

Aug 04 '25 19:08 embarekmessai

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

This works (Not recommended)

Recommended

This works