Invalid hook call. Hooks can only be called inside of the body of a function component

by

I had this issue when I used npm link to install my local library, which I’ve built using cra. I found the answer here. Which literally says:

This problem can also come up when you use npm link or an equivalent.
In that case, your bundler might “see” two Reacts — one in application
folder and one in your library folder. Assuming ‘myapp’ and ‘mylib’
are sibling folders, one possible fix is to run ‘npm link
../myapp/node_modules/react’ from ‘mylib’. This should make the
library use the application’s React copy.

Thus, running the command: npm link <path_to_local_library>/node_modules/react, eg. in my case npm link ../../libraries/core/decipher/node_modules/react from the project directory has fixed the issue.

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. React hooks – right way to clear timeouts and intervals
  5. React Hooks useState() with Object
  6. Can I set state inside a useEffect hook
  7. How to call an async function inside a UseEffect() in React?
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. Where can I make API call with hooks in react?
  10. Multiple calls to state updater from useState in component causes multiple re-renders
  11. How can I force a component to re-render with hooks in React?
  12. React hooks: accessing up-to-date state from within a callback
  13. Executing async code on update of state with react-hooks
  14. Why React Hook useState uses const and not let
  15. How to change the value of a Context with useContext?
  16. How to prevent re-rendering of components that have not changed?
  17. css position absolute making the textbox go down
  18. How target DOM with react useRef in map
  19. How to programmatically clear/reset React-Select?
  20. React Hooks Error: Hooks can only be called inside the body of a function component
  21. ReactJS: [Home] is not a component. All component children of must be a or
  22. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  23. React hooks: call component as function vs render as element
  24. React hooks useState setValue still rerender one more time when value is equal
  25. Why can’t React Hooks be called inside loops or nested function?
  26. How to set initial state for useState Hook in jest and enzyme?
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment