Alcumus/react-doc-viewer

invalid hook call

Opened this issue · 16 comments

ehsan-esfahani76 commented

It gives this error when I run it:

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.

i use react 18 .
Screenshot (66)

cyntler commented

@ehsan-esfahani76 Can you move this issue to my forked version of this repository? https://github.com/cyntler/react-doc-viewer

evgen-kent commented

I also have the same Error but I use React v.17.0.1

clio001 commented

I am receiving the same error. I am using React v.18.1.0. Any suggestions are very much appreciated.

ShlemenKirill commented

Any updates? The same issue on React v.17.0.2

cyntler commented

@ShlemenKirill @clio001 @evgen-kent Does this problem also occur at this fork: https://github.com/cyntler/react-doc-viewer? Please check it.

spogulis commented

@ShlemenKirill @clio001 @evgen-kent Does this problem also occur at this fork: https://github.com/cyntler/react-doc-viewer? Please check it.

That specific problem does not but I do get the following error:

DocumentNav.js?a1f2:16 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at beginWork$1 (react-dom.development.js?ac89:27405:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
beginWork$1 @ react-dom.development.js?ac89:27405
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25694
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
DocumentNav.js?a1f2:16 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at beginWork$1 (react-dom.development.js?ac89:27405:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
beginWork$1 @ react-dom.development.js?ac89:27405
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
recoverFromConcurrentError @ react-dom.development.js?ac89:25806
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react_devtools_backend.js:4026 The above error occurred in the <DocumentNav> component:

    at DocumentNav (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/components/DocumentNav.js:23:63)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:90691)
    at HeaderBar (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/components/HeaderBar.js:24:63)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:90691)
    at Fe (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:88240)
    at AppProvider (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/state/index.js:27:26)
    at DocViewer (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/index.js:73:27)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at eval (webpack-internal:///./node_modules/@chakra-ui/layout/dist/chakra-ui-layout.esm.js:927:24)
    at VStack
    at Proposal (webpack-internal:///./resources/js/components/Proposal/Proposal.tsx:20:21)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at eval (webpack-internal:///./node_modules/@chakra-ui/layout/dist/chakra-ui-layout.esm.js:927:24)
    at VStack
    at div
    at MainWrapper (webpack-internal:///./resources/js/components/wrappers/MainWrapper/MainWrapper.tsx:82:23)
    at eval (webpack-internal:///./resources/js/views/Dashboard/Dashboard.tsx:120:37)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:920:5)
    at Router (webpack-internal:///./node_modules/react-router/index.js:854:15)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:119:5)
    at EnvironmentProvider (webpack-internal:///./node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.esm.js:120:24)
    at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.esm.js:191:21)
    at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:96:64)
    at ThemeProvider (webpack-internal:///./node_modules/@chakra-ui/system/dist/chakra-ui-system.esm.js:117:27)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/provider/dist/chakra-ui-provider.esm.js:23:24)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js:520:23)
    at LoginProvider (webpack-internal:///./resources/js/components/context/LoginContext.tsx:68:23)
    at RecoilRoot_INTERNAL (webpack-internal:///./node_modules/recoil/es/index.js:4371:3)
    at RecoilRoot (webpack-internal:///./node_modules/recoil/es/index.js:4537:5)
    at Suspense
    at App (webpack-internal:///./resources/js/App.tsx:88:37)

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 @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js?ac89:18572
update.callback @ react-dom.development.js?ac89:18605
callCallback @ react-dom.development.js?ac89:13122
commitUpdateQueue @ react-dom.development.js?ac89:13143
commitLayoutEffectOnFiber @ react-dom.development.js?ac89:23290
commitLayoutMountEffects_complete @ react-dom.development.js?ac89:24578
commitLayoutEffects_begin @ react-dom.development.js?ac89:24564
commitLayoutEffects @ react-dom.development.js?ac89:24502
commitRootImpl @ react-dom.development.js?ac89:26779
commitRoot @ react-dom.development.js?ac89:26638
finishConcurrentRender @ react-dom.development.js?ac89:25848
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25765
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:26874 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at beginWork$1 (react-dom.development.js?ac89:27381:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
    at renderRootSync (react-dom.development.js?ac89:26390:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25706:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
beginWork$1 @ react-dom.development.js?ac89:27381
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
recoverFromConcurrentError @ react-dom.development.js?ac89:25806
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
webstar-code commented

Same error here

image

NriotHrreion commented

I got the same error

cyntler commented

@NriotHrreion fork or original?

Alina-sul commented

@NriotHrreion fork or original?

Had the same issue in original library, fork works perfectly, @cyntler thank you!

  • ❤️1
cyntler commented

@Alina-sul Nice to hear it! ;) Thanks for the fork using.

Deek9399 commented

@ShlemenKirill @clio001 @evgen-kent Does this problem also occur at this fork: https://github.com/cyntler/react-doc-viewer? Please check it.

That specific problem does not but I do get the following error:

DocumentNav.js?a1f2:16 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at beginWork$1 (react-dom.development.js?ac89:27405:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
beginWork$1 @ react-dom.development.js?ac89:27405
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25694
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
DocumentNav.js?a1f2:16 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at beginWork$1 (react-dom.development.js?ac89:27405:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
beginWork$1 @ react-dom.development.js?ac89:27405
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
recoverFromConcurrentError @ react-dom.development.js?ac89:25806
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react_devtools_backend.js:4026 The above error occurred in the <DocumentNav> component:

    at DocumentNav (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/components/DocumentNav.js:23:63)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:90691)
    at HeaderBar (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/components/HeaderBar.js:24:63)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:90691)
    at Fe (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:88240)
    at AppProvider (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/state/index.js:27:26)
    at DocViewer (webpack-internal:///./node_modules/@cyntler/react-doc-viewer/dist/index.js:73:27)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at eval (webpack-internal:///./node_modules/@chakra-ui/layout/dist/chakra-ui-layout.esm.js:927:24)
    at VStack
    at Proposal (webpack-internal:///./resources/js/components/Proposal/Proposal.tsx:20:21)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at eval (webpack-internal:///./node_modules/@chakra-ui/layout/dist/chakra-ui-layout.esm.js:927:24)
    at VStack
    at div
    at MainWrapper (webpack-internal:///./resources/js/components/wrappers/MainWrapper/MainWrapper.tsx:82:23)
    at eval (webpack-internal:///./resources/js/views/Dashboard/Dashboard.tsx:120:37)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:920:5)
    at Router (webpack-internal:///./node_modules/react-router/index.js:854:15)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:119:5)
    at EnvironmentProvider (webpack-internal:///./node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.esm.js:120:24)
    at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.esm.js:191:21)
    at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:96:64)
    at ThemeProvider (webpack-internal:///./node_modules/@chakra-ui/system/dist/chakra-ui-system.esm.js:117:27)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/provider/dist/chakra-ui-provider.esm.js:23:24)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js:520:23)
    at LoginProvider (webpack-internal:///./resources/js/components/context/LoginContext.tsx:68:23)
    at RecoilRoot_INTERNAL (webpack-internal:///./node_modules/recoil/es/index.js:4371:3)
    at RecoilRoot (webpack-internal:///./node_modules/recoil/es/index.js:4537:5)
    at Suspense
    at App (webpack-internal:///./resources/js/App.tsx:88:37)

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 @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js?ac89:18572
update.callback @ react-dom.development.js?ac89:18605
callCallback @ react-dom.development.js?ac89:13122
commitUpdateQueue @ react-dom.development.js?ac89:13143
commitLayoutEffectOnFiber @ react-dom.development.js?ac89:23290
commitLayoutMountEffects_complete @ react-dom.development.js?ac89:24578
commitLayoutEffects_begin @ react-dom.development.js?ac89:24564
commitLayoutEffects @ react-dom.development.js?ac89:24502
commitRootImpl @ react-dom.development.js?ac89:26779
commitRoot @ react-dom.development.js?ac89:26638
finishConcurrentRender @ react-dom.development.js?ac89:25848
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25765
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:26874 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at DocumentNav (DocumentNav.js?a1f2:16:1)
    at renderWithHooks (react-dom.development.js?ac89:16175:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:20913:1)
    at beginWork (react-dom.development.js?ac89:22416:1)
    at beginWork$1 (react-dom.development.js?ac89:27381:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
    at renderRootSync (react-dom.development.js?ac89:26390:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25706:1)
DocumentNav @ DocumentNav.js?a1f2:16
renderWithHooks @ react-dom.development.js?ac89:16175
mountIndeterminateComponent @ react-dom.development.js?ac89:20913
beginWork @ react-dom.development.js?ac89:22416
beginWork$1 @ react-dom.development.js?ac89:27381
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
recoverFromConcurrentError @ react-dom.development.js?ac89:25806
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533

Were you able to resolve it?

muskan-javed commented

still "invalid hook call" in both
react-doc-viewer and @cyntler/react-doc-viewer. Do anyone know how to resolve this bug?

cyntler commented

@muskan-javed Give me more informations about it - versions of your react, @cyntler/react-doc-viewer, module bundler etc.

Ali-sharafi-git commented

Same here .. I get Invalid hook call
"react-doc-viewer": "0.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
node 18

26juneboy commented

Same here I get invalid hook call
this is my version
"react": "^18.2.0",
"react-doc-viewer": "^0.1.5",
"react-dom": "^18.2.0",