Why loading a DCM file results in "no pixel data" error?

dicomfile:0 is valid. The naturalized DICOMweb metadata loader was chosen by Cornerstone instead of the local-file/WADO-URI loaders, resulting in an error message. A common cause of this is the initialization of the loader before the asynchronous Core initialisation process finishes, or Cornerstone package versions that are incompatible/duplicate. This is not always the case.

Your try/catch cannot detect the failure as setStack() is not awaited.

Set up everything in stages before constructing the rendering engine:

import {
  RenderingEngine,
  Enums,
  init as coreInit,
} from '@cornerstonejs/core';
import {
  init as dicomImageLoaderInit,
  wadouri,
} from '@cornerstonejs/dicom-image-loader';
async function run() {
  await coreInit();
  dicomImageLoaderInit({
    maxWebWorkers: 1,
  });
  const content = document.getElementById('content');
  const element = document.createElement('div');
  element.style.width = '700px';
  element.style.height = '700px';
  content.appendChild(element);
  const renderingEngine = new RenderingEngine('myRenderingEngine');
  renderingEngine.enableElement({
    viewportId: 'CTAXIALSTACK',
    type: Enums.ViewportType.STACK,
    element,
  });
  const viewport = renderingEngine.getViewport('CTAXIALSTACK');
  const input = document.getElementById('dicom');
  input.addEventListener('change', async (event) => {
    const file = event.target.files?.[0];
    if (!file) {
      return;
    }
    const imageId = wadouri.fileManager.add(file);
    try {
      await viewport.setStack([imageId]);
      viewport.render();
    } catch (error) {
      console.error('Failed to load DICOM image:', error);
    }
  });
}
run().catch(console.error);

Remove the CommonJS plugin and custom optimizeDeps configuration unless another dependency specifically requires them. Modern Cornerstone packages work directly with Vite:

import { defineConfig } from 'vite';
export default defineConfig({});