Basic Stack Tutorial: "ReferenceError: ViewportType is not defined"

[kousu]

I followed https://www.cornerstonejs.org/docs/tutorials/intro and https://www.cornerstonejs.org/docs/tutorials/basic-stack. At least I think I did. I did:

1. Download

kousu@server:~/src/$ git clone https://github.com/cornerstonejs/cornerstone3D-beta.git
Clonage dans 'cornerstone3D-beta'...
remote: Enumerating objects: 19303, done.
remote: Counting objects: 100% (4182/4182), done.
remote: Compressing objects: 100% (1491/1491), done.
remote: Total 19303 (delta 2937), reused 3463 (delta 2438), pack-reused 15121
Réception d'objets: 100% (19303/19303), 76.05 Mio | 35.82 Mio/s, fait.
Résolution des deltas: 100% (14118/14118), fait.
kousu@server:~/src/cornerstone-demo$ cd cornerstone3D-beta/packages/tools/examples/tutorial/

2. Pick tutorial code

Then I clicked the copy icon on https://www.cornerstonejs.org/docs/tutorials/basic-stack

and put it in

kousu@server:~/src/cornerstone-demo/cornerstone3D-beta/packages/tools$ vi examples/tutorial/index.ts 

giving me this file

cat examples/tutorial/index.ts

kousu@server:~/src/cornerstone-demo/cornerstone3D-beta/packages/tools$ cat examples/tutorial/index.ts 
import {
  RenderingEngine,
  Types,
  Enums,
  setVolumesForViewports,
  volumeLoader,
} from '@cornerstonejs/core';
import {
  addTool,
  BrushTool,
  SegmentationDisplayTool,
  BidirectionalTool,
  ToolGroupManager,
  WindowLevelTool,
  ZoomTool,
  segmentation,
  Enums as csToolsEnums,
} from '@cornerstonejs/tools';
import {
  initDemo,
  createImageIdsAndCacheMetaData,
  setTitleAndDescription,
} from '../../../../utils/demo/helpers';

// This is for debugging purposes
console.warn(
  'Click on index.ts to open source code for this example --------->'
);

// ============================= //
// ======== Set up page ======== //
setTitleAndDescription(
  'Tutorial Playground',
  'The playground for you to copy paste the codes in the tutorials and run it'
);

/**
 * Runs the demo
 */
async function run() {
  // 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',
    type: 'VOLUME',
  });

  /**
   *
   *
   *
   *
   *
   *
   *
   *
   *
   * Copy-paste the code from tutorials below to try them locally.
   * You can run the tutorial after by running `yarn run example tutorial` when
   * you are at the root of the tools package directory.
   *
   *
   *
   *
   *
   *
   *
   */
  const content = document.getElementById('content');
const element = document.createElement('div');
element.style.width = '500px';
element.style.height = '500px';

content.appendChild(element);

const renderingEngineId = 'myRenderingEngine';
const viewportId = 'CT_AXIAL_STACK';
const renderingEngine = new RenderingEngine(renderingEngineId);

const viewportInput = {
  viewportId,
  element,
  type: ViewportType.STACK,
};

renderingEngine.enableElement(viewportInput);

const viewport = renderingEngine.getViewport(viewportInput.viewportId);

viewport.setStack(imageIds, 60);

viewport.render()
}

run();

3. Install Cornerstone

yarn install

kousu@server:~/src/cornerstone-demo/cornerstone3D-beta/packages/tools$ yarn install
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "@kitware/[email protected]".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "gl-matrix@^3.4.3".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "@kitware/[email protected]".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "@types/d3-array@^3.0.3".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "@types/d3-interpolate@^3.0.1".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "d3-array@^3.0.3".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "d3-interpolate@^3.0.1".
warning " > @cornerstonejs/[email protected]" has unmet peer dependency "gl-matrix@^3.4.3".
warning "workspace-aggregator-0a883acd-8bea-46e0-bc0c-37c7df5ed518 > @cornerstonejs/core > @kitware/[email protected]" has unmet peer dependency "wslink@^1.1.0".
warning "workspace-aggregator-0a883acd-8bea-46e0-bc0c-37c7df5ed518 > docs > [email protected]" has unmet peer dependency "cornerstone-core@^2.6.0".
warning "workspace-aggregator-0a883acd-8bea-46e0-bc0c-37c7df5ed518 > docs > [email protected]" has incorrect peer dependency "@docusaurus/core@^2.0.0".
warning "workspace-aggregator-0a883acd-8bea-46e0-bc0c-37c7df5ed518 > docs > @docusaurus/core > [email protected]" has unmet peer dependency "react-loadable@*".
warning "workspace-aggregator-0a883acd-8bea-46e0-bc0c-37c7df5ed518 > docs > @docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/[email protected]" has unmet peer dependency "@algolia/client-search@^4.9.1".
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
[5/5] Building fresh packages...
[7/11] ⠄ canvas
[-/11] ⠄ waiting...
[6/11] ⠄ puppeteer
[-/11] ⠄ waiting...
warning Error running install script for optional dependency: "/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build
Arguments: 
Directory: /home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | linux | x64
node-pre-gyp info check checked for \"/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/Release/canvas.node\" (not found)
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-linux-glibc-x64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-linux-glibc-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-linux-glibc-x64.tar.gz 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp info ok 
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp info find Python using Python version 3.10.6 found at \"/usr/bin/python\"
gyp http GET https://nodejs.org/download/release/v18.9.1/node-v18.9.1-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v18.9.1/node-v18.9.1-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v18.9.1/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v18.9.1/SHASUMS256.txt
(node:418858) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
gyp info spawn /usr/bin/python
gyp info spawn args [
gyp info spawn args   '/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kousu/.cache/node-gyp/18.9.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/kousu/.cache/node-gyp/18.9.1',
gyp info spawn args   '-Dnode_gyp_dir=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/kousu/.cache/node-gyp/18.9.1/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Linux 5.15.0-48-generic
gyp ERR! command \"/usr/bin/node\" \"/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/bin/node-gyp.js\" \"configure\" \"--fallback-to-build\" \"--module=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/Release/canvas.node\" \"--module_name=canvas\" \"--module_path=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/Release\" \"--napi_version=8\" \"--node_abi_napi=napi\" \"--napi_build_version=0\" \"--node_napi_label=node-v108\"
gyp ERR! cwd /home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas
gyp ERR! node -v v18.9.1
gyp ERR! node-gyp -v v5.1.1
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
node-pre-gyp ERR! System Linux 5.15.0-48-generic
node-pre-gyp ERR! command \"/usr/bin/node\" \"/home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas/node_modules/.bin/node-pre-gyp\" \"install\" \"--fallback-to-build\"
node-pre-gyp ERR! cwd /home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/canvas
node-pre-gyp ERR! node -v v18.9.1
node-pre-gyp ERR! node-pre-gyp -v v1.0.9
node-pre-gyp ERR! not ok 
Failed to execute '/usr/bin/node /home/kousu/src/cornerstone-demo/cornerstone3D-beta/node_modules/node-gyp/bin/node-gyp.js configure --f
Done in 86.67s.

It gave a bunch of compilation warnings, but it said "optional" at the top and "Done" at the bottom, so I ignored them, hoping 🤞

4. Run tutorial

npm run example tutorial

kousu@server:~/src/cornerstone-demo/cornerstone3D-beta/packages/tools$ npm run example tutorial

> @cornerstonejs/[email protected] example
> node ../../utils/ExampleRunner/example-runner-cli.js tutorial


=> Extract examples

/home/kousu/src/cornerstone-demo/cornerstone3D-beta/packages/tools/examples
.
annotationSelectionAndLocking
annotationSelectionAndLocking/index.ts
annotationToolModes
annotationToolModes/index.ts
annotationVisibility
annotationVisibility/index.ts
basicSegmentationTools
basicSegmentationTools/index.ts
cancelAnnotationDrawing
cancelAnnotationDrawing/index.ts
CINETool
CINETool/index.ts
crossHairs
crossHairs/index.ts
globalSegmentationConfiguration
globalSegmentationConfiguration/index.ts
local
local/htmlSetup.ts
local/index.ts
local/uids.ts
magnifyTool
magnifyTool/index.ts
mipJumpToClick
mipJumpToClick/index.ts
modifierKeys
modifierKeys/index.ts
multipleToolGroups
multipleToolGroups/index.ts
petCt
petCt/index.ts
planarFreehandROITool
planarFreehandROITool/index.ts
polyDataActorManipulationTools
polyDataActorManipulationTools/index.ts
rectangleROIThreshold
rectangleROIThreshold/index.ts
segmentationRendering
segmentationRendering/index.ts
segmentationRenderingDifferentResolutions
segmentationRenderingDifferentResolutions/index.ts
segmentationSwapping
segmentationSwapping/index.ts
segmentLocking
segmentLocking/index.ts
sharedToolState
sharedToolState/index.ts
stackAnnotationTools
stackAnnotationTools/index.ts
stackManipulationTools
stackManipulationTools/index.ts
stackToVolumeWithAnnotations
stackToVolumeWithAnnotations/_setViewports.ts
stackToVolumeWithAnnotations/index.ts
toolGroupSpecificSegmentationRepresentationConfiguration
toolGroupSpecificSegmentationRepresentationConfiguration/index.ts
tutorial
tutorial/.index.ts.swp
tutorial/index.ts
volumeAnnotationTools
volumeAnnotationTools/index.ts
volumeViewportOrientation
volumeViewportOrientation/index.ts
volumeViewportSynchronization
volumeViewportSynchronization/index.ts
index.ts
 - annotationSelectionAndLocking : SKIPPED
index.ts
 - annotationToolModes : SKIPPED
index.ts
 - annotationVisibility : SKIPPED
index.ts
 - basicSegmentationTools : SKIPPED
index.ts
 - cancelAnnotationDrawing : SKIPPED
index.ts
 - CINETool : SKIPPED
index.ts
 - crossHairs : SKIPPED
index.ts
 - globalSegmentationConfiguration : SKIPPED
index.ts
 - local : SKIPPED
index.ts
 - magnifyTool : SKIPPED
index.ts
 - mipJumpToClick : SKIPPED
index.ts
 - modifierKeys : SKIPPED
index.ts
 - multipleToolGroups : SKIPPED
index.ts
 - petCt : SKIPPED
index.ts
 - planarFreehandROITool : SKIPPED
index.ts
 - polyDataActorManipulationTools : SKIPPED
index.ts
 - rectangleROIThreshold : SKIPPED
index.ts
 - segmentationRendering : SKIPPED
index.ts
 - segmentationRenderingDifferentResolutions : SKIPPED
index.ts
 - segmentationSwapping : SKIPPED
index.ts
 - segmentLocking : SKIPPED
index.ts
 - sharedToolState : SKIPPED
index.ts
 - stackAnnotationTools : SKIPPED
index.ts
 - stackManipulationTools : SKIPPED
index.ts
 - stackToVolumeWithAnnotations : SKIPPED
index.ts
 - toolGroupSpecificSegmentationRepresentationConfiguration : SKIPPED
.index.ts.swp
 - .index.ts.swp : SKIPPED
index.ts
 - tutorial : tutorial/index.ts
index.ts
 - volumeAnnotationTools : SKIPPED
index.ts
 - volumeViewportOrientation : SKIPPED
index.ts
 - volumeViewportSynchronization : SKIPPED
root= /home/kousu/src/cornerstone-demo/cornerstone3D-beta
<s> [webpack.Progress] 0% 

<s> [webpack.Progress] 1% setup initialize
<s> [webpack.Progress] 1% setup initialize HtmlWebpackPlugin
<s> [webpack.Progress] 1% setup initialize
<s> [webpack.Progress] 3% setup watch run
<s> [webpack.Progress] 3% setup watch run webpack-cli
<s> [webpack.Progress] 3% setup watch run ESLintWebpackPlugin_1
<s> [webpack.Progress] 3% setup watch run WebpackDevMiddleware
<s> [webpack.Progress] 3% setup watch run
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 6% setup before compile ProgressPlugin
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 7% setup compile ExternalsPlugin
<s> [webpack.Progress] 7% setup compile webpack-dev-server
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 8% setup compilation CopyPlugin
<s> [webpack.Progress] 8% setup compilation ArrayPushCallbackChunkFormatPlugin
<s> [webpack.Progress] 8% setup compilation JsonpChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation StartupChunkDependenciesPlugin
<s> [webpack.Progress] 8% setup compilation ImportScriptsChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileWasmPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileAsyncWasmPlugin
<s> [webpack.Progress] 8% setup compilation WorkerPlugin
<s> [webpack.Progress] 8% setup compilation SplitChunksPlugin
<s> [webpack.Progress] 8% setup compilation ResolverCachePlugin
<s> [webpack.Progress] 8% setup compilation HtmlWebpackPlugin
<s> [webpack.Progress] 8% setup compilation ESLintWebpackPlugin_1
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 9% setup compilation
<s> [webpack.Progress] 9% setup compilation ProgressPlugin
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation ChunkPrefetchPreloadPlugin
<s> [webpack.Progress] 9% setup compilation ModuleInfoHeaderPlugin
<s> [webpack.Progress] 9% setup compilation EvalSourceMapDevToolPlugin
<s> [webpack.Progress] 9% setup compilation JavascriptModulesPlugin
<s> [webpack.Progress] 9% setup compilation JsonModulesPlugin
<s> [webpack.Progress] 9% setup compilation AssetModulesPlugin
<s> [webpack.Progress] 9% setup compilation EntryPlugin
<s> [webpack.Progress] 9% setup compilation RuntimePlugin
<s> [webpack.Progress] 9% setup compilation InferAsyncModulesPlugin
<s> [webpack.Progress] 9% setup compilation DataUriPlugin
<s> [webpack.Progress] 9% setup compilation FileUriPlugin
<s> [webpack.Progress] 9% setup compilation CompatibilityPlugin
<s> [webpack.Progress] 9% setup compilation HarmonyModulesPlugin
<s> [webpack.Progress] 9% setup compilation AMDPlugin
<s> [webpack.Progress] 9% setup compilation RequireJsStuffPlugin
<s> [webpack.Progress] 9% setup compilation CommonJsPlugin
<s> [webpack.Progress] 9% setup compilation LoaderPlugin
<s> [webpack.Progress] 9% setup compilation LoaderPlugin
<s> [webpack.Progress] 9% setup compilation NodeStuffPlugin
<s> [webpack.Progress] 9% setup compilation APIPlugin
<s> [webpack.Progress] 9% setup compilation ExportsInfoApiPlugin
<s> [webpack.Progress] 9% setup compilation WebpackIsIncludedPlugin
<s> [webpack.Progress] 9% setup compilation ConstPlugin
<s> [webpack.Progress] 9% setup compilation UseStrictPlugin
<s> [webpack.Progress] 9% setup compilation RequireIncludePlugin
<s> [webpack.Progress] 9% setup compilation RequireEnsurePlugin
<s> [webpack.Progress] 9% setup compilation RequireContextPlugin
<s> [webpack.Progress] 9% setup compilation ImportPlugin
<s> [webpack.Progress] 9% setup compilation SystemPlugin
<s> [webpack.Progress] 9% setup compilation ImportMetaPlugin
<s> [webpack.Progress] 9% setup compilation URLPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsFactoryPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsPresetPlugin
<s> [webpack.Progress] 9% setup compilation DefaultStatsPrinterPlugin
<s> [webpack.Progress] 9% setup compilation JavascriptMetaInfoPlugin
<s> [webpack.Progress] 9% setup compilation EnsureChunkConditionsPlugin
<s> [webpack.Progress] 9% setup compilation RemoveEmptyChunksPlugin
<s> [webpack.Progress] 9% setup compilation MergeDuplicateChunksPlugin
<s> [webpack.Progress] 9% setup compilation SideEffectsFlagPlugin
<s> [webpack.Progress] 9% setup compilation FlagDependencyExportsPlugin
<s> [webpack.Progress] 9% setup compilation NamedModuleIdsPlugin
<s> [webpack.Progress] 9% setup compilation NamedChunkIdsPlugin
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation TemplatedPathPlugin
<s> [webpack.Progress] 9% setup compilation RecordIdsPlugin
<s> [webpack.Progress] 9% setup compilation WarnCaseSensitiveModulesPlugin
<s> [webpack.Progress] 9% setup compilation EntryPlugin
<s> [webpack.Progress] 9% setup compilation EntryPlugin
<s> [webpack.Progress] 9% setup compilation ProvidePlugin
<s> [webpack.Progress] 9% setup compilation HotModuleReplacementPlugin
<s> [webpack.Progress] 9% setup compilation
<s> [webpack.Progress] 10% building
<s> [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/kousu/src/cornerstone-demo/cornerstone3D-beta/packages/tools/examples
ℹ ｢wds｣: 404s will fallback to /index.html
<s> [webpack.Progress] 10% building import loader ../../../node_modules/babel-loader/lib/index.js
<s> [webpack.Progress] 10% building 0/3 entries 10/11 dependencies 2/5 modules
<s> [webpack.Progress] 10% building 0/3 entries 11/16 dependencies 2/6 modules
<s> [webpack.Progress] 28% building 1/3 entries 12/16 dependencies 5/6 modules
<s> [webpack.Progress] 28% building 1/3 entries 52/81 dependencies 14/37 modules
<s> [webpack.Progress] 28% building 1/3 entries 68/102 dependencies 17/41 modules
<s> [webpack.Progress] 28% building 1/3 entries 250/286 dependencies 41/136 modules
<s> [webpack.Progress] 28% building 1/3 entries 300/390 dependencies 83/137 modules
<s> [webpack.Progress] 28% building 1/3 entries 466/504 dependencies 106/200 modules
<s> [webpack.Progress] 28% building 1/3 entries 752/800 dependencies 168/334 modules
<s> [webpack.Progress] 28% building 1/3 entries 900/970 dependencies 208/392 modules
<s> [webpack.Progress] 28% building 1/3 entries 974/1100 dependencies 215/425 modules
<s> [webpack.Progress] 28% building 1/3 entries 1626/1700 dependencies 298/508 modules
<s> [webpack.Progress] 28% building 1/3 entries 1780/1800 dependencies 361/553 modules
<s> [webpack.Progress] 28% building 1/3 entries 1942/2000 dependencies 426/566 modules
<s> [webpack.Progress] 28% building 1/3 entries 2100/2163 dependencies 519/605 modules
<s> [webpack.Progress] 46% building 2/3 entries 2437/2437 dependencies 731/731 modules
<s> [webpack.Progress] 64% building 3/3 entries 2437/2437 dependencies 731/731 modules
<s> [webpack.Progress] 65% building
<s> [webpack.Progress] 69% building finish
<s> [webpack.Progress] 69% building finish
<s> [webpack.Progress] 70% sealing finish module graph
<s> [webpack.Progress] 70% sealing finish module graph ResolverCachePlugin
<s> [webpack.Progress] 70% sealing finish module graph ESLintWebpackPlugin_1
<s> [webpack.Progress] 70% sealing finish module graph InferAsyncModulesPlugin
<s> [webpack.Progress] 70% sealing finish module graph FlagDependencyExportsPlugin
<s> [webpack.Progress] 70% sealing finish module graph
<s> [webpack.Progress] 70% sealing plugins
<s> [webpack.Progress] 70% sealing plugins WarnCaseSensitiveModulesPlugin
<s> [webpack.Progress] 70% sealing plugins
<s> [webpack.Progress] 71% sealing dependencies optimization
<s> [webpack.Progress] 71% sealing dependencies optimization SideEffectsFlagPlugin
<s> [webpack.Progress] 71% sealing dependencies optimization
<s> [webpack.Progress] 71% sealing after dependencies optimization
<s> [webpack.Progress] 71% sealing after dependencies optimization
<s> [webpack.Progress] 72% sealing chunk graph
<s> [webpack.Progress] 72% sealing chunk graph
<s> [webpack.Progress] 73% sealing after chunk graph
<s> [webpack.Progress] 73% sealing after chunk graph
<s> [webpack.Progress] 73% sealing optimizing
<s> [webpack.Progress] 73% sealing optimizing
<s> [webpack.Progress] 74% sealing module optimization
<s> [webpack.Progress] 74% sealing module optimization
<s> [webpack.Progress] 75% sealing after module optimization
<s> [webpack.Progress] 75% sealing after module optimization
<s> [webpack.Progress] 75% sealing chunk optimization
<s> [webpack.Progress] 75% sealing chunk optimization EnsureChunkConditionsPlugin
<s> [webpack.Progress] 75% sealing chunk optimization RemoveEmptyChunksPlugin
<s> [webpack.Progress] 75% sealing chunk optimization MergeDuplicateChunksPlugin
<s> [webpack.Progress] 75% sealing chunk optimization SplitChunksPlugin
<s> [webpack.Progress] 75% sealing chunk optimization RemoveEmptyChunksPlugin
<s> [webpack.Progress] 75% sealing chunk optimization
<s> [webpack.Progress] 76% sealing after chunk optimization
<s> [webpack.Progress] 76% sealing after chunk optimization
<s> [webpack.Progress] 77% sealing module and chunk tree optimization
<s> [webpack.Progress] 77% sealing module and chunk tree optimization PersistentChildCompilerSingletonPlugin
<s> [webpack.Progress] 77% sealing module and chunk tree optimization
<s> [webpack.Progress] 77% sealing after module and chunk tree optimization
<s> [webpack.Progress] 77% sealing after module and chunk tree optimization
<s> [webpack.Progress] 78% sealing chunk modules optimization
<s> [webpack.Progress] 78% sealing chunk modules optimization
<s> [webpack.Progress] 78% sealing after chunk modules optimization
<s> [webpack.Progress] 78% sealing after chunk modules optimization
<s> [webpack.Progress] 79% sealing module reviving
<s> [webpack.Progress] 79% sealing module reviving RecordIdsPlugin
<s> [webpack.Progress] 79% sealing module reviving
<s> [webpack.Progress] 80% sealing before module ids
<s> [webpack.Progress] 80% sealing before module ids
<s> [webpack.Progress] 80% sealing module ids
<s> [webpack.Progress] 80% sealing module ids NamedModuleIdsPlugin
<s> [webpack.Progress] 80% sealing module ids
<s> [webpack.Progress] 81% sealing module id optimization
<s> [webpack.Progress] 81% sealing module id optimization
<s> [webpack.Progress] 82% sealing module id optimization
<s> [webpack.Progress] 82% sealing module id optimization
<s> [webpack.Progress] 82% sealing chunk reviving
<s> [webpack.Progress] 82% sealing chunk reviving RecordIdsPlugin
<s> [webpack.Progress] 82% sealing chunk reviving
<s> [webpack.Progress] 83% sealing before chunk ids
<s> [webpack.Progress] 83% sealing before chunk ids
<s> [webpack.Progress] 84% sealing chunk ids
<s> [webpack.Progress] 84% sealing chunk ids NamedChunkIdsPlugin
<s> [webpack.Progress] 84% sealing chunk ids
<s> [webpack.Progress] 84% sealing chunk id optimization
<s> [webpack.Progress] 84% sealing chunk id optimization
<s> [webpack.Progress] 85% sealing after chunk id optimization
<s> [webpack.Progress] 85% sealing after chunk id optimization
<s> [webpack.Progress] 86% sealing record modules
<s> [webpack.Progress] 86% sealing record modules RecordIdsPlugin
<s> [webpack.Progress] 86% sealing record modules
<s> [webpack.Progress] 86% sealing record chunks
<s> [webpack.Progress] 86% sealing record chunks RecordIdsPlugin
<s> [webpack.Progress] 86% sealing record chunks
<s> [webpack.Progress] 87% sealing module hashing
<s> [webpack.Progress] 87% sealing module hashing
<s> [webpack.Progress] 87% sealing code generation
<s> [webpack.Progress] 87% sealing code generation
<s> [webpack.Progress] 88% sealing runtime requirements
<s> [webpack.Progress] 88% sealing runtime requirements
<s> [webpack.Progress] 89% sealing hashing
<s> [webpack.Progress] 89% sealing hashing
<s> [webpack.Progress] 89% sealing after hashing
<s> [webpack.Progress] 89% sealing after hashing
<s> [webpack.Progress] 90% sealing record hash
<s> [webpack.Progress] 90% sealing record hash
<s> [webpack.Progress] 91% sealing module assets processing
<s> [webpack.Progress] 91% sealing module assets processing
<s> [webpack.Progress] 91% sealing chunk assets processing
<s> [webpack.Progress] 91% sealing chunk assets processing
<s> [webpack.Progress] 92% sealing asset processing
<s> [webpack.Progress] 92% sealing asset processing copy-webpack-plugin
<s> [webpack.Progress] 92% sealing asset processing ESLintWebpackPlugin_1
<s> [webpack.Progress] 92% sealing asset processing HotModuleReplacementPlugin
<s> [webpack.Progress] 92% sealing asset processing PersistentChildCompilerSingletonPlugin
<s> [webpack.Progress] 92% sealing asset processing HtmlWebpackPlugin
<s> [webpack.Progress] 92% sealing asset processing
<s> [webpack.Progress] 93% sealing after asset optimization
<s> [webpack.Progress] 93% sealing after asset optimization
<s> [webpack.Progress] 93% sealing recording
<s> [webpack.Progress] 93% sealing recording HotModuleReplacementPlugin
<s> [webpack.Progress] 93% sealing recording
<s> [webpack.Progress] 94% sealing after seal
<s> [webpack.Progress] 94% sealing after seal
<s> [webpack.Progress] 95% emitting emit
<s> [webpack.Progress] 95% emitting emit
<s> [webpack.Progress] 98% emitting after emit
<s> [webpack.Progress] 98% emitting after emit
<s> [webpack.Progress] 99% done plugins
<s> [webpack.Progress] 99% done plugins webpack-dev-server
<s> [webpack.Progress] 99% done plugins WebpackDevMiddleware
<s> [webpack.Progress] 99% done plugins
<s> [webpack.Progress] 99% 

<s> [webpack.Progress] 99% cache store build dependencies
<s> [webpack.Progress] 99% cache store build dependencies
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 100% 

ℹ ｢wdm｣: assets by path *.js 12.1 MiB
  asset tutorial.js 11.8 MiB [emitted] (name: main)
  asset index.worker.min.worker.js 166 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/index.worker.min.worker.js] [copied]
  asset cornerstoneWADOImageLoader.min.js 94.8 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js] [copied]
  + 2 assets
assets by path *.map 1.23 MiB
  asset index.worker.min.worker.js.map 626 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/index.worker.min.worker.js.map] [copied]
  asset cornerstoneWADOImageLoader.min.js.map 490 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js.map] [copied]
  asset 610.min.worker.js.map 85 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/610.min.worker.js.map] [copied]
  asset 888.min.worker.js.map 54.9 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/888.min.worker.js.map] [copied]
assets by path *.wasm 471 KiB
  asset a2659d938e7b5e69ece3.wasm 205 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/a2659d938e7b5e69ece3.wasm] [copied]
  asset 75a0c2dfe07b824c7d21.wasm 165 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/75a0c2dfe07b824c7d21.wasm] [copied]
  asset 62ab5d58a2bea7b5a1dc.wasm 101 KiB [emitted] [from: ../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import/62ab5d58a2bea7b5a1dc.wasm] [copied]
asset index.html 862 bytes [emitted]
orphan modules 1.13 MiB [orphan] 305 modules
runtime modules 27.3 KiB 15 modules
modules by path ../ 3.88 MiB
  modules by path ../../ 3.67 MiB
    modules by path ../../../ 3.09 MiB 216 modules
    modules by path ../../core/src/ 551 KiB 122 modules
    modules by path ../../streaming-image-volume-loader/src/ 40.4 KiB
      modules by path ../../streaming-image-volume-loader/src/helpers/*.ts 6.87 KiB 4 modules
      modules by path ../../streaming-image-volume-loader/src/*.ts 33.5 KiB
        ../../streaming-image-volume-loader/src/cornerstoneStreamingImageVolumeLoader.ts 4.68 KiB [built] [code generated]
        + 2 modules
  modules by path ../src/ 213 KiB 78 modules
./tutorial/index.ts 2.99 KiB [built] [code generated]
zlib (ignored) 15 bytes [built] [code generated]
crypto (ignored) 15 bytes [optional] [built] [code generated]
webpack 5.67.0 compiled successfully in 14369 ms
ℹ ｢wdm｣: Compiled successfully.

5. View rendered result

At http://localhost:3000, I have a blank screen and an error in my console:

Indeed, it doesn't seem like https://www.cornerstonejs.org/docs/tutorials/basic-stack ever imports ViewportType.

Versions

$ node -v
v18.9.1
$ npm -v
8.19.1

[kousu]

I patched the tutorial like this

diff --git a/packages/tools/examples/tutorial/index.ts b/packages/tools/examples/tutorial/index.ts
index 56c60756..c8d266ef 100644
--- a/packages/tools/examples/tutorial/index.ts
+++ b/packages/tools/examples/tutorial/index.ts
@@ -85,7 +85,7 @@ const renderingEngine = new RenderingEngine(renderingEngineId);
 const viewportInput = {
   viewportId,
   element,
-  type: ViewportType.STACK,
+  type: Enums.ViewportType.STACK,
 };
 
 renderingEngine.enableElement(viewportInput);

and now it gets further, but still doesn't render. I get a black image and a different error in my console:

decodeImageFrame.js:226 Uncaught (in promise) Error: options.preScale.scalingParameters must be defined if preScale.enabled is true, and scalingParameters cannot be derived from the metadata providers.
    at decodeImageFrame.js:226:13
    at decodeImageFrame.js:137:18