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

abhishek1025 · 2024-06-03T04:55:17Z

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.

EdzonBolivar11 · 2024-06-04T02:28:10Z

same issue

mbehzad-bhz · 2024-06-08T08:43:59Z

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 · 2024-06-10T18:40:03Z

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 · 2024-06-11T10:41:41Z

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]

…18.3.1

fix : creativetimofficial#693, update react and react-dom version to 18.3.1

ussam-dri · 2024-06-29T19:59:55Z

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

raja-sultan · 2024-07-04T06:50:23Z

Version 2.0.5 worked for me

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

abidta · 2024-07-04T06:56:29Z

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

naimulemon · 2024-07-08T19:14:17Z

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.

slhck · 2024-07-10T18:33:43Z

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

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

kylegendy · 2024-07-11T15:02:50Z

Version 2.0.5 worked for me

this worked for me! thanks

abidta · 2024-07-12T10:45:06Z

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

jdaly13 · 2024-07-24T16:19:08Z

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

27pchrisl · 2024-07-27T16:04:29Z

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.

truly-indian · 2024-07-28T06:55:02Z

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

rajaasim4 · 2024-07-28T08:54:18Z

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]

SoumyaSubhrajit · 2024-08-05T09:23:37Z

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

myratoun · 2024-08-13T12:15:08Z

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

bloodykheeng · 2024-09-01T08:56:36Z

bug still happening upto today whose gonna save the world

andrefox333 · 2024-09-19T06:14:03Z

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

abidta added a commit to abidta/material-tailwind that referenced this issue Jun 11, 2024

fix : creativetimofficial#693, update react and react-dom version to …

43ec14b

…18.3.1

abidta added a commit to abidta/material-tailwind that referenced this issue Jun 15, 2024

fix : creativetimofficial#693, update react and react-dom version to …

88a2033

…18.3.1

abidta added a commit to abidta/material-tailwind that referenced this issue Jun 15, 2024

Merge pull request #1 from abidta/abidta-patch-1

7454d8f

fix : creativetimofficial#693, update react and react-dom version to 18.3.1

kylegendy mentioned this issue Jul 11, 2024

look #676

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

abhishek1025 commented Jun 3, 2024

EdzonBolivar11 commented Jun 4, 2024

mbehzad-bhz commented Jun 8, 2024

jerotrica commented Jun 10, 2024

abidta commented Jun 11, 2024 •

edited

Loading

ussam-dri commented Jun 29, 2024

raja-sultan commented Jul 4, 2024 •

edited

Loading

abidta commented Jul 4, 2024

naimulemon commented Jul 8, 2024 •

edited

Loading

This works

slhck commented Jul 10, 2024

kylegendy commented Jul 11, 2024

abidta commented Jul 12, 2024

jdaly13 commented Jul 24, 2024

27pchrisl commented Jul 27, 2024

truly-indian commented Jul 28, 2024

rajaasim4 commented Jul 28, 2024 •

edited

Loading

SoumyaSubhrajit commented Aug 5, 2024

myratoun commented Aug 13, 2024 •

edited

Loading

bloodykheeng commented Sep 1, 2024

andrefox333 commented Sep 19, 2024

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

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

Comments

abhishek1025 commented Jun 3, 2024

EdzonBolivar11 commented Jun 4, 2024

mbehzad-bhz commented Jun 8, 2024

jerotrica commented Jun 10, 2024

abidta commented Jun 11, 2024 • edited Loading

This works

ussam-dri commented Jun 29, 2024

raja-sultan commented Jul 4, 2024 • edited Loading

abidta commented Jul 4, 2024

naimulemon commented Jul 8, 2024 • edited Loading

This works

slhck commented Jul 10, 2024

kylegendy commented Jul 11, 2024

abidta commented Jul 12, 2024

jdaly13 commented Jul 24, 2024

27pchrisl commented Jul 27, 2024

truly-indian commented Jul 28, 2024

rajaasim4 commented Jul 28, 2024 • edited Loading

SoumyaSubhrajit commented Aug 5, 2024

myratoun commented Aug 13, 2024 • edited Loading

bloodykheeng commented Sep 1, 2024

andrefox333 commented Sep 19, 2024

abidta commented Jun 11, 2024 •

edited

Loading

raja-sultan commented Jul 4, 2024 •

edited

Loading

naimulemon commented Jul 8, 2024 •

edited

Loading

rajaasim4 commented Jul 28, 2024 •

edited

Loading

myratoun commented Aug 13, 2024 •

edited

Loading