[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.

[jottenlips]

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

[kunukn]

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.