Unable to load a viewport using cornerstone and create react app in build mode

[aymeric]

Describe Your Question

• I tried to reproduce a simple example based on this [https://www.cornerstonejs.org/live-examples/volumebasic](https://cornerstone volume basic)

What steps can we follow to reproduce the bug?

1. create a react app (using create-react-app)
2. create a viewer like this:

import { Enums, RenderingEngine, volumeLoader } from "@cornerstonejs/core";
import { useEffect, useRef, useState } from "react";
import { createImageIdsAndCacheMetaData } from "./cs/createImageIdsAndCacheMetaData";
import { initDemo } from "./cs/initDemo";
import { setCtTransferFunctionForVolumeActor } from "./cs/setCtTransferFunctionForVolumeActor";

const { ViewportType } = Enums;
// ============================= //

/**
 * Runs the demo
 */
const App = () => {
  const elementRef = useRef(null);
  const [images, setImages] = useState([]);

  // Get Cornerstone imageIds and fetch metadata into RAM

  useEffect(() => {
    const initialize = async () => {
      // Init Cornerstone and related libraries
      await initDemo();

      // Get Cornerstone imageIds and fetch metadata into RAM
      const imageIds = await createImageIdsAndCacheMetaData({
        StudyInstanceUID:
          "1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463",
        SeriesInstanceUID:
          "1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561",
        wadoRsRoot: "https://d3t6nz73ql33tx.cloudfront.net/dicomweb",
      });

      setImages(imageIds);
    };
    initialize();
  }, []);

  useEffect(() => {
    if (!images?.length) return;

    const loadViewer = async () => {
      // Instantiate a rendering engine
      const renderingEngineId = "myRenderingEngine";
      const renderingEngine = new RenderingEngine(renderingEngineId);

      // Create a stack viewport
      const viewportId = "CT_SAGITTAL_STACK";
      const viewportInput = {
        viewportId,
        type: ViewportType.ORTHOGRAPHIC,
        element: elementRef.current,
        defaultOptions: {
          orientation: Enums.OrientationAxis.SAGITTAL,
          background: [0.2, 0, 0.2],
        },
      };

      renderingEngine.enableElement(viewportInput);

      // Get the stack viewport that was created
      const viewport = renderingEngine.getViewport(viewportId);

      // Define a unique id for the volume
      const volumeName = "CT_VOLUME_ID"; // Id of the volume less loader prefix
      const volumeLoaderScheme = "cornerstoneStreamingImageVolume"; // Loader id which defines which volume loader to use
      const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id

      // Define a volume in memory
      const volume = await volumeLoader.createAndCacheVolume(volumeId, {
        imageIds: images,
      });

      // Set the volume to load
      volume.load();

      // Set the volume on the viewport
      viewport.setVolumes([
        { volumeId, callback: setCtTransferFunctionForVolumeActor },
      ]);

      // Render the image
      viewport.render();
    };

    loadViewer();
  }, [images]);

  return (
    <div className="App">
      <div
        ref={elementRef}
        style={{ width: "500px", height: "500px" }}
      />
    </div>
  );
};

export default App;

4. npm run build && serve -s build
5. Uncaught TypeError: Cannot read properties of undefined (reading ‘CLAMP_TO_EDGE’)
   
   

Thank you in advance for your help, I already have an app in production and I have been unable to update it since I encountered this bug…