react: [lerna] Invariant Violation: Hooks can only be called inside the body of a function component.

Hello,

I have an error regarding hooks in a lerna architecture project where we import a ux lib made of style component inside a react project. If component are host in the same app, error is not thrown.

Do you want to request a feature or report a bug? Report a bug

What is the current behavior?

An error is thrown:

Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost/static/js/main.chunk.js:121537:23)
    at resolveDispatcher (http://localhost/static/js/main.chunk.js:122922:36)
    at useRef (http://localhost/static/js/main.chunk.js:122956:28)
    at useStateWithGetter (http://localhost/static/js/main.chunk.js:39121:71)
    at useField (http://localhost/static/js/main.chunk.js:39161:35)
    at http://localhost/static/js/main.chunk.js:39417:27
    at renderWithHooks (http://localhost/static/js/0.chunk.js:70682:22)
    at mountIndeterminateComponent (http://localhost/static/js/0.chunk.js:72686:17)
    at beginWork (http://localhost/static/js/0.chunk.js:73237:20)
    at performUnitOfWork (http://localhost/static/js/0.chunk.js:77166:16)
    at workLoop (http://localhost/static/js/0.chunk.js:77207:28)
    at renderRoot (http://localhost/static/js/0.chunk.js:77287:11)
    at performWorkOnRoot (http://localhost/static/js/0.chunk.js:78232:11)
    at performWork (http://localhost/static/js/0.chunk.js:78142:11)
    at performSyncWork (http://localhost/static/js/0.chunk.js:78116:7)
    at requestWork (http://localhost/static/js/0.chunk.js:77971:9)
    at scheduleWork (http://localhost/static/js/0.chunk.js:77778:9)
    at scheduleRootUpdate (http://localhost/static/js/0.chunk.js:78482:7)
    at updateContainerAtExpirationTime (http://localhost/static/js/0.chunk.js:78508:14)
    at updateContainer (http://localhost/static/js/0.chunk.js:78576:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost/static/js/0.chunk.js:78889:7)
    at http://localhost/static/js/0.chunk.js:79041:18
    at unbatchedUpdates (http://localhost/static/js/0.chunk.js:78359:14)
    at legacyRenderSubtreeIntoContainer (http://localhost/static/js/0.chunk.js:79037:9)
    at Object.render (http://localhost/static/js/0.chunk.js:79112:16)
    at boot (http://localhost/static/js/main.chunk.js:207505:52)
    at http://localhost/static/js/main.chunk.js:207517:10

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: Use this public repo and follow the readme. It’s a good representation of our project’s architecture. You will experience the error.

What is the expected behavior? Not throwing an error about hooks and displaying a working form.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Well, didn’t tested before 16.8.0. But using react-form instead of informed works. An issue has been open on informed repository. II have the feeling that it’s more related to React than informed itself.

I am aware of this page but nothing worked.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 20 (4 by maintainers)

Most upvoted comments

This was resolved when I added --hoist to lerna run bootstrap. I think it was confused by react being in multiple node_modules folders.

+19

jottenlips on Nov 4, 2019

I suspect the issue is within UX, CLIENT setup somehow and where React is first loaded from UX/node_modules folder and then from CLIENT/node_modules and some mismatch happens somehow.

I followed this guide: https://reactjs.org/warnings/invalid-hook-call-warning.html

I ran npm ls react from CLIENT and got extraneous error

$ npm ls react @test-informed-hooks/client @0.1.0 /test-informed-hooks/packages/client └── react@16.8.4 extraneous npm ERR! extraneous: react@16.8.4 /temp/test-informed-hooks/packages/client/node_modules/react

I did the changes below but still got the hooks error.

By examining the UX build bundle I discovered that React was included. To not include react / react-dom in the UX bundle when it is build by Webpack, you could add this in UX webpack.config.js.

externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
      umd: 'react',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
    },
  },

Informed is imported both by UX and CLIENT. It is bundled in the UX build. It might possible also be bundled in the CLIENT bundle.

kunukn on Mar 16, 2019

@ppinel this error usually indicates that you have more than one copy of React in your bundle.

See: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

aweary on Mar 14, 2019

Just a heads up @ppinel. I have a lerna projecat that this was an issue on. I had looked into the npm ls and I too was having these extraneous errors, however, it was only reporting a single react installation (as extraneous) from the root. Because everything was hoisted, I didn’t think to check any lower. Of course, after digging deeper, rimraffing the node_modules everywhere and reinstalling, I finally found that, indeed, there were two versions of react in my app. So, once i deleted the version that got installed locally, voila, it worked. That said, it does look like your not hooks code path are indeed using hooks, and rewriting that might help future work. I will through an issue on your repo.

joshball on Mar 18, 2019