Module Import Errors When Using dicom-microscopy-viewer@0.45.1

[namladuc]

The dicom-microscopy-viewer library is a valuable tool for displaying DICOM (Digital Imaging and Communications in Medicine) microscopy images within web applications. However, the recent release of version seems to have introduced module import issues for users, leading to two distinct error scenarios:

1. Using <script type="module">:

When developers include the library using the <script type="module"> tag like this:

<script type="module" src="https://unpkg.com/dicom-microscopy-viewer@0.45.1"></script>

The error message Uncaught TypeError: Failed to resolve module specifier "mathjs". Relative references must start with either "/", "./", or "../". appears in the console. This error suggests an issue with module resolution and specifier handling.

2. Using <script> without type="module":

Alternatively, when developers attempt to include the library without the type="module" attribute:

<script src="https://unpkg.com/dicom-microscopy-viewer@0.45.1"></script>

They encounter the error message Uncaught SyntaxError: Cannot use import statement outside a module. This error implies that the library's code is written as ES6 modules, and without the type="module" attribute, it cannot properly handle import statements.

I can't use it maybe there's a more specific example in the import section (a full example) and my dicomWeb works fine.

[pieper]

Are you able to trace which commit changed the behavior?

[namladuc]

@pieper i think it may be after committed on May 8, 2021: Up version to 0.24.0. I'm not sure but when i try to used ver 0.20.0 - 0.22.1. It runs through the meta data retrieval and gets an error while initializing

 try {
    const viewer = new DICOMMicroscopyViewer.api.VLWholeSlideMicroscopyImageViewer({
      client,
      metadata,
      controls,
      useWebGL: true,
      retrieveRendered: true
   });
   viewer.render({container: 'activeViewport'});
} catch(err) {
   console.error(err)
}

[bnapora]

@pieper I can confirm issue appears after v 0.22.1. Can't import any version of dicom-microscopy-viewer greater then 0.22.1, inside a script tag.

Below are the imports I was using:

<script src="https://unpkg.com/@cornerstonejs/codec-libjpeg-turbo/dist/libjpegturbowasm.js"></script>
    <script src="https://unpkg.com/@cornerstonejs/codec-openjpeg/dist/openjpegwasm.js"></script>
    <script src="https://unpkg.com/@cornerstonejs/codec-charls/dist/charlsjs.js"></script>
    
    <script src="https://unpkg.com/dicomweb-client"></script>
    <script src="https://unpkg.com/dicom-microscopy-viewer@0.22.1"></script> 

[pieper]

Maybe others can comment here, but I understand script tag usage of various libraries is no longer considered standard practice since it makes it hard to resolve dependencies correctly. @igoroctaviano is it the case that script tags are explicitly not supported anymore?

[igoroctaviano]

@pieper as far as I know the support for inline imports was dropped in favor of module imports. You can see that the script tag example was replaced to import here: e7f295c#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L34

And also the examples using script tags were removed here: 222dfda

[bnapora]

Thanks for update @igoroctaviano. Is there any plan to add updated examples for vanilla javascript?