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

Bug Report

Describe the Bug

After upgrading to the latest versions of @ohif packages our app crashes with:

index.umd.js:25 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at z (index.umd.js:25)
    at useContext (index.umd.js:25)
    at Sr (index.umd.js:49)
    at withI18nextTranslation(Unknown) (index.umd.js:49)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)


react-dom.development.js:19814 The above error occurred in the <withI18nextTranslation(Unknown)> component:
    in withI18nextTranslation(Unknown)
    in Tr
    in Unknown
    in div
    in t (created by ConnectFunction)
    in ConnectFunction (at Toolbar.tsx:216)
    in div (at Toolbar.tsx:202)
    in Toolbar (created by ConnectFunction)
    in ConnectFunction (at ViewerPage.tsx:13)
    in div (at ViewerPage.tsx:12)
    in ViewerPage (created by Context.Consumer)
    in Route (at PageSwitcher.tsx:15)
    in Switch (at PageSwitcher.tsx:13)
    in PageSwitcher (at App.tsx:30)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (at App.tsx:28)
    in Provider (at App.tsx:27)
    in App
    in DragDropContext(App) (at src/index.tsx:25)

the full text of the decoded 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.

What steps can we follow to reproduce the bug?

After upgrading from

    "ohif-core": "0.5.2",
    "react-viewerbase": "0.4.1",
    "ohif-cornerstone-extension": "0.0.30",

to

    "@ohif/core": "0.50.3",
    "@ohif/ui": "0.50.1",
    "@ohif/extension-cornerstone": "0.50.1",

In both cases

    "react": "16.9.0",
    "react-dom": "16.9.0",

Here is what I know so far:

• If I remember correctly, the old versions predate React hooks
• react-i18next might break Rules of Hooks. See react-i18next#934
• After eliminating @ohif/i18n and react-i18next functionality from @ohif/ui completely the same error now appears in @ohif/ui (stack trace is readable up to the LayoutManager. @ohif packages only provide minified versions, so I cannot tell where the error happens exactly)
• We don’t have hooks in our app
• This is a dev build of our app. It bundles a dev version of React 16.9.0. I don’t know where the minified (prod) version of React comes from.
• Nothing like that happened with old versions (probably due to lack of this particular check without hooks being present)

That’s all information I’ve got so far. How can I debug this?

[dannyrb]

We don’t have great visibility into how our packages are being consumed; so we optimize our use cases, and then wait for individuals to pipe up that it would be great if we also supported X.

Because we primarily touch the extension/platform packages through the monorepo, we don’t feel the pain points of minified UMD consumption as keenly as others. I’m more than happy to review PRs for any OHIF or Cornerstonejs org repository packages that add ESM, Commonjs, and unminified variants. I can even provide some rough guidance.

All of this is “on my list” to do, but it’s not at the top.

It’s not super opaque, but our priorities are driven by grants, consultants contributing client work, developers addressing community needs to increase the appeal of the platform, and fly-by-the-night crusaders popping in a quick fix/enhancement.

[dannyrb]

Some Context:

It’s a little tricky, but more than happy to discuss and pursue enhancements around this.

Right now, each extension and platform project is published independently w/ a UMD target. We can add CommonJS and Source, but ESM has to wait for WebPack v5, or we need to maintain a separate Rollup config.

@ohif/viewer is a bit special in that our monorepo setup has us building everything from source to create the bundle (UMD), or PWA output

The bundle, published as @ohif/viewer has two top level named exports:

• App, the React component of the viewer.
• installViewer, a convenience method that takes App’s props (our config object), a container to render to, and a callback

This Issue

I think this above issue could be our package builds, or react-cornerstone-viewport / react-vtkjs-viewport, accidentally bundling react. LayoutManager would be using the react-cornerstone-viewport that is a dependency of @ohif/extension-cornerstone

We should, at a minimum:

• Provide unminified bundles
• Provide sourcemaps for minified bundles

There is an in-progress PR to shift LayoutManager into the Viewer project, as it doesn’t make a ton of sense as a reusable UI component.

That’s my brain dump