invalid hook call - Githubissues

ehsan-esfahani76 commented 2 years ago

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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app.

i use react 18 . Screenshot (66)

cyntler commented 2 years ago

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

evgen-kent commented 2 years ago

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

clio001 commented 1 year ago

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

ShlemenKirill commented 1 year ago

Any updates? The same issue on React v.17.0.2

cyntler commented 1 year ago

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

spogulis commented 1 year ago

@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 1 year ago

Same error here

NriotHrreion commented 1 year ago

I got the same error

cyntler commented 1 year ago

@NriotHrreion fork or original?

Alina-sul commented 1 year ago

@NriotHrreion fork or original?

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

cyntler commented 1 year ago

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

Deek9399 commented 1 year ago

@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 1 year ago

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

cyntler commented 1 year ago

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

Ali-sharafi-git commented 10 months ago

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 6 months ago

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",

Alcumus / react-doc-viewer

invalid hook call #110