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

Question

I am making a client project using React with Typescript and using Material Tailwind UI - MT. But when using MT's components, I get a useContext error, it seems to be reported in MT's theme.js. I have tried everything but still can't fix it, does anyone know this error?

Error Message

Error Message 1

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Error Message 2

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (react.development.js:1618:1)
    at useTheme (theme.js:1:1)
    at App (App.tsx:7:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)

index.tsx

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Provider} from "react-redux";
import {store} from "./grvd/storage";
import {RouterProvider} from "react-router-dom";
import {router} from "./grvd/routers";
import {ThemeProvider} from "@material-tailwind/react";

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <ThemeProvider>
            <Provider store={store}>
                <Suspense fallback={<div>Loading...</div>}>
                    <RouterProvider router={router}/>
                </Suspense>
            </Provider>
        </ThemeProvider>
    </React.StrictMode>
);

package.json

{
  "name": "client-ver-2",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.11.5",
    "@material-tailwind/react": "^2.1.9",
    "@mui/material": "^5.15.16",
    "@reduxjs/toolkit": "^2.2.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.96",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.4",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "tailwind-merge": "^2.3.0",
    "tailwind-variants": "^0.2.1",
    "typescript": "^4.9.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": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
  }
}

tailwind.config.ts

import graviadTheme from "./graviad-theme.js";
import withMT from "@material-tailwind/react/utils/withMT";

module.exports = withMT({
    content: ["./src/**/*.{html,js, ts,tsx}"],
    theme: {
        extend: {
            colors: graviadTheme.colors,
            fontFamily: graviadTheme.fontFamily,
            fontSize: graviadTheme.fontSize,
            boxShadow: graviadTheme.boxShadow,
            borderRadius: graviadTheme.borderRadius,
        },
    },
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
    ],
});

App.tsx

import React from 'react';
import './App.css';
import {Outlet} from "react-router-dom";
import {Typography} from "@material-tailwind/react";

function App() {
    return (
        <div className="App">
            <Typography variant={'h1'}>Graviad</Typography>
            <Outlet/>
        </div>
    );
}

export default App;

I tried very hard to try everything like updating to the last version, downgrading the version but it didn't work. Hope to get help from everyone <3

Answer 1

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]