Uncaught TypeError: Cannot read properties of null (reading 'useMemo') at Ri component

[KevinA-cpu]

HI trying to use your react-scheduler with React Metronic v8 template (just migrated to Vite) I copy paste the example in the readme.md file but got hit with this error, not sure what is happening.

The full log:

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. at Ri (http://localhost:5173/node_modules/.vite/deps/@bitnoi__se_react-scheduler.js?v=17668191:5772:9) at section at Component (http://localhost:5173/src/app/modules/apps/reservation-calendar/ReservationCalendarPage.tsx:15:39) at Suspense at SuspensedView (http://localhost:5173/src/app/routing/PrivateRoutes.tsx:243:26) at Outlet (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1119:26) at div at Content (http://localhost:5173/src/_metronic/layout/components/Content.tsx:16:20) at div at div at div at div at PageDataProvider (http://localhost:5173/src/_metronic/layout/core/PageData.tsx:17:29) at MasterLayout (http://localhost:5173/src/_metronic/layout/MasterLayout.tsx:24:22) at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1179:5) at PrivateRoutes at Outlet (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1119:26) at AuthInit (http://localhost:5173/src/app/modules/auth/core/Auth.tsx:61:21) at ThemeModeProvider (http://localhost:5173/src/_metronic/partials/layout/theme-mode/ThemeModeProvider.tsx:55:30) at LayoutProvider (http://localhost:5173/src/_metronic/layout/core/LayoutProvider.tsx:33:27) at IntlProvider3 (http://localhost:5173/node_modules/.vite/deps/react-intl.js?v=17668191:4116:45) at I18nProvider (http://localhost:5173/src/_metronic/i18n/i18nProvider.tsx:34:25) at Suspense at App at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1179:5) at Router (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1126:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=17668191:86:5) at AppRoutes (http://localhost:5173/src/app/routing/AppRoutes.tsx:28:29) at AuthProvider (http://localhost:5173/src/app/modules/auth/core/Auth.tsx:28:25) at MetronicI18nProvider (http://localhost:5173/src/_metronic/i18n/Metronici18n.tsx:40:33) at QueryClientProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-64JXKFDQ.js?v=17668191:2853:25) overrideMethod @ console.js:213 printWarning @ @bitnoise_react-scheduler.js?v=17668191:137 error @ @bitnoi__se_react-scheduler.js?v=17668191:121 resolveDispatcher @ @bitnoise_react-scheduler.js?v=17668191:1046 useMemo @ @bitnoise_react-scheduler.js?v=17668191:1094 Ri @ @bitnoi__se_react-scheduler.js?v=17668191:5783 renderWithHooks @ chunk-E3WH7TKQ.js?v=17668191:12039 mountIndeterminateComponent @ chunk-E3WH7TKQ.js?v=17668191:15341 beginWork @ chunk-E3WH7TKQ.js?v=17668191:16324 callCallback2 @ chunk-E3WH7TKQ.js?v=17668191:3669 invokeGuardedCallbackDev @ chunk-E3WH7TKQ.js?v=17668191:3694 invokeGuardedCallback @ chunk-E3WH7TKQ.js?v=17668191:3728 beginWork$1 @ chunk-E3WH7TKQ.js?v=17668191:19615 performUnitOfWork @ chunk-E3WH7TKQ.js?v=17668191:19079 workLoopSync @ chunk-E3WH7TKQ.js?v=17668191:19019 renderRootSync @ chunk-E3WH7TKQ.js?v=17668191:18998 recoverFromConcurrentError @ chunk-E3WH7TKQ.js?v=17668191:18619 performConcurrentWorkOnRoot @ chunk-E3WH7TKQ.js?v=17668191:18567 workLoop @ chunk-E3WH7TKQ.js?v=17668191:197 flushWork @ chunk-E3WH7TKQ.js?v=17668191:176 performWorkUntilDeadline @ chunk-E3WH7TKQ.js?v=17668191:384 Show 21 more frames Show less @bitnoise_react-scheduler.js?v=17668191:1095 Uncaught TypeError: Cannot read properties of null (reading 'useMemo') at useMemo (@bitnoise_react-scheduler.js?v=17668191:1095:29) at Ri (@bitnoi__se_react-scheduler.js?v=17668191:5783:38) at renderWithHooks (chunk-E3WH7TKQ.js?v=17668191:12039:26) at mountIndeterminateComponent (chunk-E3WH7TKQ.js?v=17668191:15341:21) at beginWork (chunk-E3WH7TKQ.js?v=17668191:16324:22) at HTMLUnknownElement.callCallback2 (chunk-E3WH7TKQ.js?v=17668191:3669:22) at Object.invokeGuardedCallbackDev (chunk-E3WH7TKQ.js?v=17668191:3694:24) at invokeGuardedCallback (chunk-E3WH7TKQ.js?v=17668191:3728:39) at beginWork$1 (chunk-E3WH7TKQ.js?v=17668191:19615:15) at performUnitOfWork (chunk-E3WH7TKQ.js?v=17668191:19079:20) useMemo @ @bitnoise_react-scheduler.js?v=17668191:1095 Ri @ @bitnoi__se_react-scheduler.js?v=17668191:5783 renderWithHooks @ chunk-E3WH7TKQ.js?v=17668191:12039 mountIndeterminateComponent @ chunk-E3WH7TKQ.js?v=17668191:15341 beginWork @ chunk-E3WH7TKQ.js?v=17668191:16324 callCallback2 @ chunk-E3WH7TKQ.js?v=17668191:3669 invokeGuardedCallbackDev @ chunk-E3WH7TKQ.js?v=17668191:3694 invokeGuardedCallback @ chunk-E3WH7TKQ.js?v=17668191:3728 beginWork$1 @ chunk-E3WH7TKQ.js?v=17668191:19615 performUnitOfWork @ chunk-E3WH7TKQ.js?v=17668191:19079 workLoopSync @ chunk-E3WH7TKQ.js?v=17668191:19019 renderRootSync @ chunk-E3WH7TKQ.js?v=17668191:18998 recoverFromConcurrentError @ chunk-E3WH7TKQ.js?v=17668191:18619 performConcurrentWorkOnRoot @ chunk-E3WH7TKQ.js?v=17668191:18567 workLoop @ chunk-E3WH7TKQ.js?v=17668191:197 flushWork @ chunk-E3WH7TKQ.js?v=17668191:176 performWorkUntilDeadline @ chunk-E3WH7TKQ.js?v=17668191:384 Show 17 more frames Show less console.js:213 The above error occurred in the component:

   at Ri (http://localhost:5173/node_modules/.vite/deps/@bitnoi__se_react-scheduler.js?v=17668191:5772:9) at section at Component (http://localhost:5173/src/app/modules/apps/reservation-calendar/ReservationCalendarPage.tsx:15:39) at Suspense at SuspensedView (http://localhost:5173/src/app/routing/PrivateRoutes.tsx:243:26) at Outlet (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1119:26) at div at Content (http://localhost:5173/src/_metronic/layout/components/Content.tsx:16:20) at div at div at div at div at PageDataProvider (http://localhost:5173/src/_metronic/layout/core/PageData.tsx:17:29) at MasterLayout (http://localhost:5173/src/_metronic/layout/MasterLayout.tsx:24:22) at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1179:5) at PrivateRoutes at Outlet (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1119:26) at AuthInit (http://localhost:5173/src/app/modules/auth/core/Auth.tsx:61:21) at ThemeModeProvider (http://localhost:5173/src/_metronic/partials/layout/theme-mode/ThemeModeProvider.tsx:55:30) at LayoutProvider (http://localhost:5173/src/_metronic/layout/core/LayoutProvider.tsx:33:27) at IntlProvider3 (http://localhost:5173/node_modules/.vite/deps/react-intl.js?v=17668191:4116:45) at I18nProvider (http://localhost:5173/src/_metronic/i18n/i18nProvider.tsx:34:25) at Suspense at App at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1179:5) at Router (http://localhost:5173/node_modules/.vite/deps/chunk-BPRKDLUL.js?v=17668191:1126:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=17668191:86:5) at AppRoutes (http://localhost:5173/src/app/routing/AppRoutes.tsx:28:29) at AuthProvider (http://localhost:5173/src/app/modules/auth/core/Auth.tsx:28:25) at MetronicI18nProvider (http://localhost:5173/src/_metronic/i18n/Metronici18n.tsx:40:33) at QueryClientProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-64JXKFDQ.js?v=17668191:2853:25)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. overrideMethod @ console.js:213 logCapturedError @ chunk-E3WH7TKQ.js?v=17668191:13912 update.callback @ chunk-E3WH7TKQ.js?v=17668191:13932 callCallback @ chunk-E3WH7TKQ.js?v=17668191:9894 commitUpdateQueue @ chunk-E3WH7TKQ.js?v=17668191:9911 commitLayoutEffectOnFiber @ chunk-E3WH7TKQ.js?v=17668191:16948 commitLayoutMountEffects_complete @ chunk-E3WH7TKQ.js?v=17668191:17816 commitLayoutEffects_begin @ chunk-E3WH7TKQ.js?v=17668191:17805 commitLayoutEffects @ chunk-E3WH7TKQ.js?v=17668191:17756 commitRootImpl @ chunk-E3WH7TKQ.js?v=17668191:19233 commitRoot @ chunk-E3WH7TKQ.js?v=17668191:19158 finishConcurrentRender @ chunk-E3WH7TKQ.js?v=17668191:18643 performConcurrentWorkOnRoot @ chunk-E3WH7TKQ.js?v=17668191:18601 workLoop @ chunk-E3WH7TKQ.js?v=17668191:197 flushWork @ chunk-E3WH7TKQ.js?v=17668191:176 performWorkUntilDeadline @ chunk-E3WH7TKQ.js?v=17668191:384 Show 16 more frames Show less chunk-E3WH7TKQ.js?v=17668191:19283 Uncaught TypeError: Cannot read properties of null (reading 'useMemo') at useMemo (@bitnoise_react-scheduler.js?v=17668191:1095:29) at Ri (@bitnoi__se_react-scheduler.js?v=17668191:5783:38) at renderWithHooks (chunk-E3WH7TKQ.js?v=17668191:12039:26) at mountIndeterminateComponent (chunk-E3WH7TKQ.js?v=17668191:15341:21) at beginWork (chunk-E3WH7TKQ.js?v=17668191:16324:22) at beginWork$1 (chunk-E3WH7TKQ.js?v=17668191:19603:22) at performUnitOfWork (chunk-E3WH7TKQ.js?v=17668191:19079:20) at workLoopSync (chunk-E3WH7TKQ.js?v=17668191:19019:13) at renderRootSync (chunk-E3WH7TKQ.js?v=17668191:18998:15) at recoverFromConcurrentError (chunk-E3WH7TKQ.js?v=17668191:18619:28) useMemo @ @bitnoise_react-scheduler.js?v=17668191:1095 Ri @ @bitnoi__se_react-scheduler.js?v=17668191:5783 renderWithHooks @ chunk-E3WH7TKQ.js?v=17668191:12039 mountIndeterminateComponent @ chunk-E3WH7TKQ.js?v=17668191:15341 beginWork @ chunk-E3WH7TKQ.js?v=17668191:16324 beginWork$1 @ chunk-E3WH7TKQ.js?v=17668191:19603 performUnitOfWork @ chunk-E3WH7TKQ.js?v=17668191:19079 workLoopSync @ chunk-E3WH7TKQ.js?v=17668191:19019 renderRootSync @ chunk-E3WH7TKQ.js?v=17668191:18998 recoverFromConcurrentError @ chunk-E3WH7TKQ.js?v=17668191:18619 performConcurrentWorkOnRoot @ chunk-E3WH7TKQ.js?v=17668191:18567 workLoop @ chunk-E3WH7TKQ.js?v=17668191:197 flushWork @ chunk-E3WH7TKQ.js?v=17668191:176 performWorkUntilDeadline @ chunk-E3WH7TKQ.js?v=17668191:384 Show 14 more frames Show less

[KevinA-cpu]

possibly related to issue #52

here's my code if it helps import React, {useState} from 'react' import {Scheduler, SchedulerData} from '@bitnoi.se/react-scheduler'

export default function Component(): JSX.Element { const [isLoading, setIsLoading] = useState(false) const [filterButtonState, setFilterButtonState] = useState(0)

return (

console.log(newRange)} onTileClick={(clickedResource) => console.log(clickedResource)} onItemClick={(item) => console.log(item)} onFilterData={() => { // Some filtering logic... setFilterButtonState(1) }} onClearFilterData={() => { // Some clearing filters logic... setFilterButtonState(0) }} config={{ zoom: 0, filterButtonState, }} />

) }

const mockedSchedulerData: SchedulerData = [ { id: '070ac5b5-8369-4cd2-8ba2-0a209130cc60', label: { icon: 'https://picsum.photos/24', title: 'Joe Doe', subtitle: 'Frontend Developer', }, data: [ { id: '8b71a8a5-33dd-4fc8-9caa-b4a584ba3762', startDate: new Date('2023-04-13T15:31:24.272Z'), endDate: new Date('2023-08-28T10:28:22.649Z'), occupancy: 3600, title: 'Project A', subtitle: 'Subtitle A', description: 'array indexing Salad West Account', bgColor: 'rgb(254,165,177)', }, { id: '22fbe237-6344-4c8e-affb-64a1750f33bd', startDate: new Date('2023-10-07T08:16:31.123Z'), endDate: new Date('2023-11-15T21:55:23.582Z'), occupancy: 2852, title: 'Project B', subtitle: 'Subtitle B', description: 'Tuna Home pascal IP drive', bgColor: 'rgb(254,165,177)', }, { id: '3601c1cd-f4b5-46bc-8564-8c983919e3f5', startDate: new Date('2023-03-30T22:25:14.377Z'), endDate: new Date('2023-09-01T07:20:50.526Z'), occupancy: 1800, title: 'Project C', subtitle: 'Subtitle C', bgColor: 'rgb(254,165,177)', }, { id: 'b088e4ac-9911-426f-aef3-843d75e714c2', startDate: new Date('2023-10-28T10:08:22.986Z'), endDate: new Date('2023-10-30T12:30:30.150Z'), occupancy: 11111, title: 'Project D', subtitle: 'Subtitle D', description: 'Garden heavy an software Metal', bgColor: 'rgb(254,165,177)', }, ], }, ]

[BartoszBBitnoise]

Hello! Can you share your package.json ?

[KevinA-cpu]

Certainly, I have however go with a different solution for my problem without using this library but here's hoping this can help. { "name": "demo8", "version": "8.2.0", "type": "module", "private": true, "homepage": "", "dependencies": { "@babel/core": "^7.23.6", "@capacitor/android": "^5.5.1", "@capacitor/cli": "^5.5.1", "@capacitor/core": "^5.5.1", "@capacitor/ios": "^5.5.1", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", "@formatjs/intl-pluralrules": "5.2.4", "@formatjs/intl-relativetimeformat": "11.2.4", "@fortawesome/fontawesome-free": "6.1.1", "@mui/icons-material": "^5.15.1", "@mui/material": "^5.15.2", "@mui/system": "^5.15.2", "@mui/x-date-pickers": "^6.18.6", "@popperjs/core": "^2.11.6", "@testing-library/dom": "^9.3.3", "@vitejs/plugin-react-swc": "^3.5.0", "animate.css": "4.1.1", "apexcharts": "3.35.0", "axios": "1.4.0", "bootstrap": "5.3.2", "bootstrap-icons": "^1.5.0", "chart.js": "4.3.0", "clsx": "1.1.1", "date-fns": "^2.25.0", "formik": "^2.4.5", "line-awesome": "1.3.0", "nouislider": "15.5.1", "prism-react-renderer": "2.0.5", "prism-themes": "1.9.0", "prismjs": "1.28.0", "qs": "6.10.3", "react": "18.0.0", "react-apexcharts": "1.4.0", "react-bootstrap": "2.5.0-beta.1", "react-copy-to-clipboard": "5.1.0", "react-dom": "18.0.0", "react-inlinesvg": "3.0.0", "react-intl": "6.4.4", "react-query": "3.38.0", "react-router-dom": "6.3.0", "react-table": "^7.7.0", "react-topbar-progress-indicator": "4.1.1", "socicon": "3.0.5", "vite": "^5.0.10", "vite-tsconfig-paths": "^4.2.2", "yup": "^1.0.0" }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "14.0.0", "@testing-library/user-event": "14.4.3", "@types/babel__core": "^7", "@types/bootstrap": "5.1.10", "@types/chart.js": "2.9.37", "@types/jest": "29.5.2", "@types/node": "20.3.1", "@types/prismjs": "1.26.0", "@types/qs": "6.9.7", "@types/react": "18.0.6", "@types/react-copy-to-clipboard": "5.0.2", "@types/react-dom": "18.0.2", "@types/react-table": "^7.7.9", "@types/sass-loader": "8.0.3", "css-loader": "6.7.1", "del": "7.0.0", "mini-css-extract-plugin": "2.6.1", "prettier": "2.6.2", "rtlcss-webpack-plugin": "4.0.7", "sass": "^1.69.5", "sass-loader": "13.2.0", "typescript": "^4.7.4", "webpack": "5.74.0", "webpack-cli": "5.1.4" }, "scripts": { "start": "vite", "build": "tsc && vite build", "serve": "vite preview", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "prettier --check .", "format": "prettier --write .", "rtl": "webpack --config=rtl.config.js" }, "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" ] }, "eslintIgnore": [ "dist/*" ] }

[amjadmak]

@KevinA-cpu

I solved it by changing the version of react and react-dom in package.json as below First: Delete node_modules and package-lock.json

Second: Go to package.json and change the version of react and react-dom as below

"react": "18.2.0", 
"react-dom": "18.2.0", 

run npm i

[KevinA-cpu]

@amjadmak thank you for the reply for my long lost issue, even thou I've decided not to use this lib because this wasn't what I need anyway. I'll close this issue since it has become stale.

[amjadmak]

You are welcome @KevinA-cpu , I also decided not to use this library as well but at least let other people who are having difficulties feel relieved.