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

Explanation of the problem

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

The error stack trace in react-dom.development.js indicates that the error is related to the withI18nextTranslation component:

react-dom.development.js:19814 The above error occurred in the <withI18nextTranslation(Unknown)> component:
    in withI18nextTranslation(Unknown)
    in Tr
    in Unknown
    ...

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.

To reproduce the bug, upgrade the packages in the following manner:

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",

React version used in both cases:
    "react": "16.9.0",
    "react-dom": "16.9.0",

The following information is available:

• The old versions predate React hooks
• The error might be caused by react-i18next breaking the Rules of Hooks
• Eliminating @ohif/i18n and react-i18next functionality from @ohif/ui does not resolve the issue and the same error appears in @ohif/ui. The stack trace is only readable up to the LayoutManager
• The application does not use hooks
• The crash occurs in the dev build of the application, which bundles a dev version of React 16.9.0
• The source of the minified (prod) version of React is unknown
• The issue did not occur with the old versions, probably due to the absence of a particular check without hooks.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Invalid hook call. Hooks can only be called inside of the body of a function component in OHIF Viewers

import React, { useState } from 'react';

const [count, setCount] = useState(0);

function App() {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

It should be written like this:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

Other popular problems with OHIF Viewers

import React, { lazy, Suspense } from 'react';

const ImageComponent = lazy(() => import('./ImageComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ImageComponent />
    </Suspense>
  );
}

export default App;

Problem: Incorrect Mapping of Image Coordinates

Sometimes, the OHIF Viewer may display the images with incorrect coordinates, causing the images to be misaligned. This can occur due to incorrect calculations during the mapping process.

Solution:

To fix this issue, double-check the calculations used to map the image coordinates. It is important to use the correct image orientation and slice thickness when performing these calculations. Additionally, you can use a library such as dicom-parser to parse the DICOM data and ensure that the correct image information is being used. Here’s an example of how to use dicom-parser:

import { parseDicom } from 'dicom-parser';

const dicomData = new Uint8Array(...);

const dataSet = parseDicom(dicomData);

const imageOrientation = dataSet.floatString('x00200037');
const sliceThickness = dataSet.floatString('x00180050');

// Perform calculations using imageOrientation and sliceThick

Problem: Error with OHIF Viewer’s Cornerstone Library

The OHIF Viewer is built on the Cornerstone library, which is used for image rendering and manipulation. Sometimes, developers may encounter issues with the Cornerstone library, such as error messages or unexpected behavior during image manipulation.

Solution:

Make sure that the latest version of the Cornerstone library is being used, as bug fixes and performance improvements are frequently released. Additionally, you can review the documentation and troubleshooting guide for the Cornerstone library to see if there is a known solution for the issue you are encountering. If the issue persists, you can reach out to the Cornerstone community for help or file an issue on the GitHub repository. Here’s an example of how to update to the latest version of Cornerstone:

npm install cornerstone-core@latest

A brief introduction to OHIF Viewers

OHIF Viewers are open-source medical image viewers designed for viewing and manipulating medical images such as DICOM files. They are built using the latest web technologies, including React, Redux, and the Cornerstone library. OHIF Viewers offer a range of features, including multi-layered viewer, advanced windowing and leveling, tool management, and support for multiple modalities. The modular design of the OHIF Viewers allows developers to easily add or remove features as needed, making it a highly customizable solution for viewing medical images.

The OHIF Viewers use a combination of client-side and server-side rendering, which enables fast image loading and manipulation. The viewer can be integrated into existing medical imaging systems, such as PACS or EHR, and can be easily configured to meet the needs of different institutions. OHIF Viewers are designed to be compatible with the latest web browsers and mobile devices, allowing images to be viewed on a variety of devices and platforms. With its flexible architecture and range of features, the OHIF Viewers provide an effective solution for viewing and manipulating medical images in a clinical setting.

Most popular use cases for OHIF Viewers

1. Integration with Medical Imaging Systems: OHIF Viewers can be integrated with existing medical imaging systems, such as PACS or EHR, to provide a comprehensive solution for viewing and manipulating medical images. The viewers can be easily configured to meet the specific needs of different institutions. For example, the integration of OHIF Viewers with a PACS system can be achieved by using the DICOMWeb protocol to fetch and retrieve studies.

import { OHIF } from '@ohif/core';

// Setting up the DICOMWeb Client to query the studies
const server = new OHIF.servers.DICOMWebClient({
  uri: 'https://server.com/dicom-web',
  requestOptions: {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  },
});

2. Image Viewing and Manipulation: OHIF Viewers provide advanced image viewing and manipulation capabilities, such as multi-layered viewer, advanced windowing and leveling, and support for multiple modalities. The viewers also allow for the use of various image tools, such as length, angle, and cross-sectional measurement tools, which can be customized to meet the needs of different use cases.
3. Mobile and Browser Compatibility: OHIF Viewers are designed to be compatible with the latest web browsers and mobile devices, allowing images to be viewed on a variety of platforms. This makes it possible for clinicians and healthcare professionals to view medical images on the go, providing more convenient and efficient access to patient data. Additionally, the viewers support responsive design, allowing the images to be displayed correctly on different screen sizes and resolutions.