react-cornerstone: Cannot read property 'getEnabledElement' of undefined

Question

I have a project which make a use of the react version of the cornerstone.js library. I'm using :https://github.com/cornerstonejs/react-cornerstone-viewport

I was creating a simple functional compononent to render the canvas on the screen:

import React, { useState } from "react";
import CornerstoneViewport from "react-cornerstone-viewport";

export const Test = (): JSX.Element => {
  const [cornerstone] = useState({
    tools: [
      // Mouse
      {
        name: "Wwwc",
        mode: "active",
        modeOptions: { mouseButtonMask: 1 },
      },
      {
        name: "Zoom",
        mode: "active",
        modeOptions: { mouseButtonMask: 2 },
      },
      {
        name: "Pan",
        mode: "active",
        modeOptions: { mouseButtonMask: 4 },
      },
      // Scroll
      { name: "StackScrollMouseWheel", mode: "active" },
      // Touch
      { name: "PanMultiTouch", mode: "active" },
      { name: "ZoomTouchPinch", mode: "active" },
      { name: "StackScrollMultiTouch", mode: "active" },
    ],
    imageIds: [
      "dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm",
      "dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm",
    ],
  });

  return (
    <CornerstoneViewport
      tools={cornerstone.tools}
      imageIds={cornerstone.imageIds}
      style={{ minWidth: "100%", height: "512px", flex: "1" }}
    />
  );
};

However I get this error:

Uncaught (in promise) TypeError: Cannot read property 'getEnabledElement' of undefined
    at _getUUIDFromElement (cornerstoneTools.js?b351:11117)
    at Object.setStartLoadHandler (cornerstoneTools.js?b351:11133)
    at CornerstoneViewport._setupLoadHandlers (index.es.js?be04:10310)
    at CornerstoneViewport._setupLoadHandlers (react-hot-loader.development.js?9cb3:714)
    at CornerstoneViewport._callee$ (index.es.js?be04:9825)
    at tryCatch (index.es.js?be04:194)
    at Generator.invoke [as _invoke] (index.es.js?be04:420)
    at Generator.prototype.<computed> [as next] (index.es.js?be04:246)
    at asyncGeneratorStep (index.es.js?be04:928)
    at _next (index.es.js?be04:950)

Does someone have a clue on what could be the problem?

Answer 1

When using react-cornerstone you have to initialise the viewport before being able to use it.

In plain JS the function initCornerstone is as follows :

import dicomParser from "dicom-parser";
import cornerstone from "cornerstone-core";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";

export function initCornerstone() {
  // Cornertone Tools
  cornerstoneTools.external.cornerstone = cornerstone;
  cornerstoneTools.external.Hammer = Hammer;
  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

  //
  cornerstoneTools.init();

  // Preferences
  const fontFamily =
    "Work Sans, Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif";
  cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
  cornerstoneTools.toolStyle.setToolWidth(2);
  cornerstoneTools.toolColors.setToolColor("rgb(255, 255, 0)");
  cornerstoneTools.toolColors.setActiveColor("rgb(0, 255, 0)");

  cornerstoneTools.store.state.touchProximity = 40;

  // IMAGE LOADER
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  cornerstoneWADOImageLoader.webWorkerManager.initialize({
    maxWebWorkers: navigator.hardwareConcurrency || 1,
    startWebWorkersOnDemand: true,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false,
        usePDFJS: false,
        strict: false,
      },
    },
  });

  // Debug
  window.cornerstone = cornerstone;
  window.cornerstoneTools = cornerstoneTools;
}

You'll have to call the function before rendering the viewport. Typically in App