Uncaught Error: its-fine: useFiber must be called within a

Question

I'm trying to use konva js in my react app and here is the version details

package.json

"react": "^16.8.6",
"react-dom": "^16.8.6",

"konva": "^8.4.2",
"react-konva": "^18.2.3",

min code to recreate error

import { Stage } from "react-konva"

<Stage></Stage>

upon adding stage getting the below error. But, with plain java-script way i.e without using react-konva wrapper we can use it.

index.js:78 Uncaught Error: its-fine: useFiber must be called within a <FiberProvider />!
    at useFiber (index.js:78:11)
    at useContextBridge (index.js:135:17)
    at StageWrap (ReactKonvaCore.js:64:85)
    at renderWithHooks (react-dom.development.js:14803:18)
    at mountIndeterminateComponent (react-dom.development.js:17482:13)
    at beginWork (react-dom.development.js:18596:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
    at invokeGuardedCallback (react-dom.development.js:292:31)
    at beginWork$1 (react-dom.development.js:23203:7)
useFiber @ index.js:78
useContextBridge @ index.js:135
StageWrap @ ReactKonvaCore.js:64
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164



react_devtools_backend.js:4012 The above error occurred in the <StageWrap> component:
    in StageWrap (created by ForwardRef)
    in FiberProvider (created by ForwardRef)
    in ForwardRef (created by Canvas)
    in div (created by Canvas)
    in Canvas (created by Connect(Canvas))
    in Connect(Canvas) (created by VideoCanvas)
    in div (created by VideoCanvas)
    in div (created by VideoCanvas)
    in VideoCanvas (created by Connect(VideoCanvas))
    in Connect(VideoCanvas) (created by VideoAnnotation)
    in div (created by VideoAnnotation)
    in Provider (created by VideoAnnotation)
    in VideoAnnotation (created by TagArea)
    in div (created by TagArea)
    in div (created by TagArea)
    in TagArea (created by Connect(TagArea))
    in Connect(TagArea) (created by withRouter(Connect(TagArea)))
    in withRouter(Connect(TagArea)) (created by UserTasks)
    in Suspense (created by UserTasks)
    in div (created by UserTasks)
    in div (created by UserTasks)
    in div (created by UserTasks)
    in div (created by UserTasks)
    in ThemeProvider (created by UserTasks)
    in UserTasks (created by Form(UserTasks))
    in Form(UserTasks) (created by Connect(Form(UserTasks)))
    in Connect(Form(UserTasks)) (created by ReduxForm)
    in ReduxForm (created by Connect(ReduxForm))
    in Connect(ReduxForm) (created by withRouter(Connect(ReduxForm)))
    in withRouter(Connect(ReduxForm)) (created by RouterContext)
    in div (created by AdminApp)
    in div (created by AdminApp)
    in AdminApp (created by Connect(AdminApp))
    in Connect(AdminApp) (created by withRouter(Connect(AdminApp)))
    in withRouter(Connect(AdminApp)) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Routes)
    in Routes (created by AppContainer)
    in Provider (created by AppContainer)
    in InnerThemeProvider (created by ThemeProvider)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (created by AppContainer)
    in AuthProvider (created by AppContainer)
    in ErrorBoundaries (created by AppContainer)
    in AppContainer

By downgrading version of react-konva I can make it work but If I want the latest version of konva then how to deal with this?

I did not working with this packagein in past. but I think you should wrap your main component content whick most of time is App.jsx as children into FiberProvider — Saeed Hemmati, Jan 22 '23 at 05:32
you know I'm not using FiberProvider directly may be the library is using that internally. I strongly believe that the latest version of konva has some problem which they need to fix. — Vikas Acharya, Jan 22 '23 at 07:38
You're wrong, I said maybe you **should use** FiberProvider into your main component. — Saeed Hemmati, Jan 22 '23 at 10:28
@SaeedHemmati ok got it, but they haven't mentioned in their document about this. Also, with latest versions of react the latest konva was working fine. I think they have to fix this problem. But, you gave a good workaround thanks. — Vikas Acharya, Jan 22 '23 at 13:32
@VikasAcharya if you think you have found a problem please could you pay back the developers investment of time by raising an issue at https://github.com/konvajs/react-konva. Thank you in advance. — Vanquished Wombat, Jan 23 '23 at 08:06

score 3 · Answer 1 · answered Jan 23 '23 at 19:16

react-konva version 18.2.3 doesn't work with react version 16.8.6.

You have two options:

Downgrade react-konva:

npm install react-konva@16

Or upgrade react and react-dom to the latest (I recommend doing this).

npm istall react@latest react-dom@latest

Uncaught Error: its-fine: useFiber must be called within a

1 Answers1