Uncaught Error: its-fine: useFiber must be called within a <FiberProvider />

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?

Answer 1

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

You have two options:

1. Downgrade react-konva:

npm install react-konva@16

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

npm istall react@latest react-dom@latest