Closed abhishek1025 closed 3 weeks ago
same issue
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"
},
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"
},
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
.
refer this comment https://github.com/creativetimofficial/material-tailwind/issues/693#issuecomment-2254187277_ Posted by @27pchrisl
├─┬ @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
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" } }
Version 2.0.5 worked for me
Link: https://www.material-tailwind.com/docs/react/release-notes#v2.0.5
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" } }
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
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 version18.3.1
. but@material-tailwind/react
use react and dom version18.2.0
. you can update this versions to18.3.1
inpackage-lock.json
. and reinstall all packages withnpm 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
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.
but @material-tailwind/react use react and dom version 18.2.0 .
Then the React version should simply be updated in this project, no?
Version 2.0.5 worked for me
this worked for me! thanks
@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"
},
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
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.
downgrading the version of @material-tailwind/react to 2.0.5 worked for me. No other solution worked.
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
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" } }
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" },
bug still happening upto today whose gonna save the world
Still getting it to this day. Running it with the latest and greatest Remix version.
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 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.
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!
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!
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 .
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.
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.