Error occurs when import connerstone/core

Support
1

Describe Your Question

  • I have build a DICOMviewer using angular (v16)
    The tscomplier show below error when I start the application on local

Error: node_modules/@cornerstonejs/core/dist/types/RenderingEngine/StackViewport.d.ts:80:5 - error TS2416: Property ‘getFrameOfReferenceUID’ in type ‘StackViewport’ is not assignable to the same property in base type ‘IStackViewport’.
Type ‘() => string | undefined’ is not assignable to type ‘() => string’.
Type ‘string | undefined’ is not assignable to type ‘string’.
Type ‘undefined’ is not assignable to type ‘string’.
80 getFrameOfReferenceUID: () => string | undefined;
~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@cornerstonejs/core/dist/types/RenderingEngine/StackViewport.d.ts:80:5 - error TS2416: Property ‘getFrameOfReferenceUID’ in type ‘StackViewport’ is not assignable to the same property in base type ‘Viewport’.
Type ‘() => string | undefined’ is not assignable to type ‘() => string’.
Type ‘string | undefined’ is not assignable to type ‘string’.
Type ‘undefined’ is not assignable to type ‘string’.
80 getFrameOfReferenceUID: () => string | undefined;
~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@cornerstonejs/core/dist/types/RenderingEngine/VideoViewport.d.ts:44:5 - error TS2416: Property ‘setFrameRange’ in type ‘VideoViewport’ is not assignable to the same property in base type ‘IVideoViewport’.
Type ‘(frameRange: number) => void’ is not assignable to type ‘(range?: [number, number] | undefined) => any’.
Types of parameters ‘frameRange’ and ‘range’ are incompatible.
Type ‘[number, number] | undefined’ is not assignable to type ‘number’.
Type ‘undefined’ is not assignable to type ‘number’.
44 setFrameRange(frameRange: number): void;
~~~~~~~~~~~~~
Error: node_modules/@cornerstonejs/core/dist/types/RenderingEngine/VolumeViewport.d.ts:18:5 - error TS2416: Property ‘getCurrentImageId’ in type ‘VolumeViewport’ is not assignable to the same property in base type ‘BaseVolumeViewport’.
Type ‘() => string | undefined’ is not assignable to type ‘() => string’.
Type ‘string | undefined’ is not assignable to type ‘string’.
Type ‘undefined’ is not assignable to type ‘string’.
18 getCurrentImageId: () => string | undefined;
~~~~~~~~~~~~~~~~~
Error: node_modules/@cornerstonejs/core/dist/types/RenderingEngine/VolumeViewport3D.d.ts:8:5 - error TS2416: Property ‘getCurrentImageIdIndex’ in type ‘VolumeViewport3D’ is not assignable to the same property in base type ‘BaseVolumeViewport’.
Type ‘() => number | undefined’ is not assignable to type ‘() => number’.
Type ‘number | undefined’ is not assignable to type ‘number’.
Type ‘undefined’ is not assignable to type ‘number’.
8 getCurrentImageIdIndex: () => number | undefined;
~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/dicom-parser/index.d.ts:3:40 - error TS2591: Cannot find name ‘Buffer’. Do you need to install type definitions for node? Try npm i --save-dev @types/node and then add ‘node’ to the types field in your tsconfig.
3 export type ByteArray = Uint8Array | Buffer;
~~~~~~

  • Which OHIF version you are using?

“@cornerstonejs/codec-charls”: “^1.2.3”,
“@cornerstonejs/codec-libjpeg-turbo-8bit”: “^1.2.2”,
“@cornerstonejs/codec-openjpeg”: “^1.2.2”,
“@cornerstonejs/codec-openjph”: “^2.4.5”,
“@cornerstonejs/core”: “^1.41.0”,
“@cornerstonejs/dicom-image-loader”: “^1.41.0”,
“@cornerstonejs/streaming-image-volume-loader”: “^1.41.0”,
“@cornerstonejs/tools”: “^1.41.0”,

What steps can we follow to reproduce the bug?

  1. create angular services
  2. register dicom image loader
  3. start application
import * as cornerstone from '@cornerstonejs/core';
import * as dicomParser from 'dicom-parser';
import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';

import { Injectable } from '@angular/core';
import { Logger } from '@app/@shared';
const log = new Logger('dicom-service');
@Injectable({
  providedIn: 'root',
})
export class DicomLoaderService {
  private imageLoaders = [];

  constructor() {
    cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
    cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;
    cornerstoneDICOMImageLoader.configure({
      useWebWorkers: true,
      decodeConfig: {
        convertFloatPixelDataToInt: false,
      },
    });
    log.debug(gapi.auth.getToken().access_token);
    cornerstoneDICOMImageLoader.configure({
      beforeSend: function (xhr) {
        // Add custom headers here (e.g. auth tokens)
        xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.auth.getToken().access_token);
      },
    });
    var config = {
      maxWebWorkers: navigator.hardwareConcurrency || 1,
      startWebWorkersOnDemand: false,
      taskConfiguration: {
        decodeTask: {
          initializeCodecsOnStartup: true,
          strict: false,
        },
      },
    };

    cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);
  }