search

xzdarcy / react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://zdarcy.com/
MIT License
312 stars 88 forks source link

Invalid Hook Call #2

Closed troelsfr closed 2 years ago

troelsfr commented 2 years ago

First of all, this component looks amazing!

Following the instructions in the README.md and installing the component into my project, I get following error:

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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at useRef (react.development.js:1504:1)
    at index.esm.js:2814:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636: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:27451:1)
resolveDispatcher @ react.development.js:1465
useRef @ react.development.js:1504
(anonymous) @ index.esm.js:2814
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1465 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at useRef (react.development.js:1504:1)
    at index.esm.js:2814:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636: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:27451:1)
resolveDispatcher @ react.development.js:1465
useRef @ react.development.js:1504
(anonymous) @ index.esm.js:2814
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <ForwardRef> component:

    at http://localhost:3000/static/js/bundle.js:14734:22
    at div
    at div
    at Remote (http://localhost:3000/static/js/bundle.js:353:82)
    at Routes (http://localhost:3000/static/js/bundle.js:101703:5)
    at Router (http://localhost:3000/static/js/bundle.js:101636:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:100445:5)
    at App

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.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1465 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at useRef (react.development.js:1504:1)
    at index.esm.js:2814:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

Here are the packages I am using:

{
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@monaco-editor/react": "^4.4.5",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.88",
    "@mui/material": "^5.8.6",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.0",
    "@types/electron-devtools-installer": "^2.2.2",
    "@types/jest": "^28.1.1",
    "@types/node": "^17.0.40",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "@xzdarcy/react-timeline-editor": "^0.1.1",
    "electron-devtools-installer": "^3.2.0",
    "electron-reload": "^1.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4"
  },
xzdarcy commented 2 years ago

Maybe you can try react 17. I am not sure if the component is compatible with react 18。

AntzeloBRKK commented 2 years ago

@xzdarcy @troelsfr Hey, I run into the same issue today.

This is the log I got from yarn on the peer-requirements

image

Maybe it provides any of you with more insight. Could we just update the peer dependency of react-virtualized to react '17' || '18' to make this pass? Unless react-virtualized is using something explicitly from a previous react version that is no longer available It shouldnt be an issue (at least at first glance).

P.S. This package does look very nice, I'm only now starting to look at as it seems to be doing things no other library does, and especially in an open format (not too restricting).

AntzeloBRKK commented 2 years ago

@xzdarcy small update, https://github.com/bvaughn/react-virtualized/blob/master/package.json From the react-virtualized package.json it looks like it accepts up to version 18

"peerDependencies": {
    "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
    "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
},

So maybe this is just a bump-up in this repo's package.json?

P.S. If there is a way we could be of help I would be glad to participate.

xzdarcy commented 2 years ago

@xzdarcy small update, https://github.com/bvaughn/react-virtualized/blob/master/package.json From the react-virtualized package.json it looks like it accepts up to version 18

"peerDependencies": {
    "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
    "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
},

So maybe this is just a bump-up in this repo's package.json?

P.S. If there is a way we could be of help I would be glad to participate.

Thanks, it is work. I have fixed it and released a new version 0.1.2.