Hi,
The Calendar example on https://www.telerik.com/kendo-react-ui/getting-started/ does not work. Also using the Grid does not work. Although, the Button component works fine.
Version of react and react-dom is 17.0.2. Version of the react components is 5.0.1. npm version 8.3.2
Error:
react.development.js:1476 Uncaught Error: 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 resolveDispatcher (react.development.js:1476:1)
at Object.useContext (react.development.js:1484:1)
at usePropsContext (usePropsContext.js:4:1)
at withPropsContext.js:20:1
at renderWithHooks (react-dom.development.js:14985:1)
at updateForwardRef (react-dom.development.js:17044:1)
at beginWork (react-dom.development.js:19098:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
usePropsContext @ usePropsContext.js:4
(anonymous) @ withPropsContext.js:20
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <KendoReactCalendar> component:
at http://localhost:3000/static/js/bundle.js:43201:95
at App
1 Answer, 1 is accepted
Hi Gerry,
As stated in the error message, this could occur when different versions of React are loaded. With that in mind, could you please try and load React version 17.0.2 in the package.json:
"dependencies": {
"react-dom": "17.0.2",
"react": "17.0.2",If the issue persist, please share the package.json content, so we can see if there is something else that could be causing the issue.
Looking forward to your reply.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi, thank you for your response.
I followed the steps from the start again and now it seems to work. Probably I mistyped something that messed up my sample code.
Regards,