single-character-input-boxes icon indicating copy to clipboard operation
single-character-input-boxes copied to clipboard

Published 20 hours ago • verified publisher icon dannyradden

Problem when add web3modal to package.json

Open hashemnik opened this issue 3 years ago • 2 comments

Hello team, I have added web3modal to the project and suddenly RICIBs stop working and throws an error: ` 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 useDebugValue (react.development.js:1529:1) at StyledComponent.js:116:1 at O (StyledComponent.js:174: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) resolveDispatcher @ react.development.js:1465 useDebugValue @ react.development.js:1529 (anonymous) @ StyledComponent.js:116 O @ StyledComponent.js:174 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 5react.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:

  4. You might have mismatching versions of React and the renderer (such as React DOM)

  5. You might be breaking the Rules of Hooks

  6. 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 useDebugValue (react.development.js:1529:1) at StyledComponent.js:116:1 at O (StyledComponent.js:174: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) resolveDispatcher @ react.development.js:1465 useDebugValue @ react.development.js:1529 (anonymous) @ StyledComponent.js:116 O @ StyledComponent.js:174 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 5react-dom.development.js:18687 The above error occurred in the <styled.input> component:

    at O (http://localhost:3000/static/js/bundle.js:147961:8) at $b0601b235983fedb$var$InputBox (http://localhost:3000/static/js/bundle.js:132300:11) at div at div at $ef99b842007faef5$var$ReactIndividualCharacterInputBoxes (http://localhost:3000/static/js/bundle.js:132334:5) at div at Test at RenderedRoute (http://localhost:3000/static/js/bundle.js:134886:5) at Routes (http://localhost:3000/static/js/bundle.js:135308:5) at div at div at MessageProvider (http://localhost:3000/static/js/bundle.js:6585:88) at Router (http://localhost:3000/static/js/bundle.js:135246:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:133604:5) at Web3ModalProvider (http://localhost:3000/static/js/bundle.js:3316:84) at App (http://localhost:3000/static/js/bundle.js:2969:72)

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 useDebugValue (react.development.js:1529:1) at StyledComponent.js:116:1 at O (StyledComponent.js:174: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) `

hashemnik avatar Nov 20 '22 10:11 hashemnik

Is this problem with web3modal or single-character-input-boxes?

hashemnik avatar Nov 20 '22 10:11 hashemnik

I dont see anything that indicates that this is a RICIB problem. If you remove RICIBs do you still get the error?

dannyradden avatar Nov 20 '22 23:11 dannyradden