Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inclusion of VTK extension causes the OHIF study viewer to crash

See original GitHub issue

Thank you for creating an amazing set of components.

I’ve been trying to embed the OHIF viewer into an existing web application for viewing Dicoms pulled from Orthanc, and I’m running into trouble with with the VTK plugin. Is there an minimal working example that I can inspect to see how to include it?

Right now, I’m using a checkout from the recent master branch with a custom script include build of the extension that I’ve adapted from the example in your documentation. Here’s what the HTML and viewer initialization look like:

<body>
  ...
  <div id="root"></div>

  <!-- OHIF and Plugins -->
  <script type="text/javascript" src="/js/ohif/sonador.app-config.js" crossorigin></script>
  <script src="/js/ohif/index.umd.js" crossorigin></script>
  <script src="/js/ohif/microscopy/index.umd.js" crossorigin></script>
  <script src="/js/ohif/cornerstone/index.umd.js" crossorigin></script>
  <script src="/js/ohif/segmentation/index.umd.js" crossorigin></script>
  <script src="/js/ohif/vtk/index.umd.js" crossorigin></script>
  ...
  <!-- Initialize Viewer -->
  <script>
    // Application configuration
    var containerId = 'root';

    // Read PACS server connection from JSON string
    window.config.servers.dicomWeb = [
      JSON.parse(document.getElementById('pacs-connection').innerHTML)
    ];

    // Logos and branding for viewer
    window.config.whiteLabeling = {
      createLogoComponentFn: function(React) {
        return React.createElement('a', {
          rel: 'noopener noreferrer',
          className: 'header-brand',
        });
      }
    }

    // Extensions
    window.config.extensions = [OHIFExtDicomMicroscopy, OHIFExtCornerstone, OHIFExtDicomSeg, OHIFExtVtk];

    window.OHIFViewer.installViewer(
      // Configuration and container ID
      window.config, containerId,

      // Completion callback
      function() {
        console.log('OHIF Viewer rendered/updated');  
      }
    );
  </script>
...
</body>

The VTK extension loads okay, but when I attempt to load the study viewer, it causes everything to crash with the following error.

This is the relevant information from the link included in the output:

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.

Any thoughts on what might be causing this, or how it might be fixed? I’m happy to repair this and submit a merge/pull request, but need some guidance to get started.

Issue Analytics

State:
Created 3 years ago
Comments:18 (5 by maintainers)

Top GitHub Comments

2reactions

robertsoakescommented, May 12, 2020

@dannyrb Thanks for responding so quickly with the suggestions. I’ll start by comparing the build manifest for VTK against the other plugins, and try and spot for differences.

The project I’m working on needs the volume rendering and three dimensional capabilities of VTK, and we’ve decided to build it on OHIF; so this seems like a good time and place to dig into the code.

I’ll see if I can get you a merge request in the next few days. Cheers!

1reaction

racacerecommented, Nov 5, 2021

@ranasrule please try again, yesterday we had some problems with our Gitlab server, now is back online.