cannot use @cornerstonejs/core in vue app

[dima9911]

Hello.

Im try to import @cornerstonejs/core (at guide on cornerstonejs.org) in my vue app

<script>
  import { RenderingEngine } from '@cornerstonejs/core';
</script>

but have this error:

 error  in ./node_modules/@cornerstonejs/core/dist/esm/utilities/loadImageToCanvas.js

Module parse failed: Unexpected token (10:68)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         function successCallback(image, imageId) {
|             const { modality } = metaData.get('generalSeriesModule', imageId) || {};
>             image.isPreScaled = image.isPreScaled || image.preScale?.scaled;
|             renderToCanvas(canvas, image, modality);
|             resolve(imageId);

 @ ./node_modules/@cornerstonejs/core/dist/esm/utilities/index.js 21:0-52 32:0-679
 @ ./node_modules/@cornerstonejs/core/dist/esm/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/babel-loader/lib??ref--15!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.152:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/VolumeViewport.js

Module parse failed: Unexpected token (197:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 return entry.uid === volumeId;
|             });
>             volumeActor = actorEntry?.actor;
|         }
|         if (!volumeActor) {

 @ ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/index.js 3:0-46 5:0-122
 @ ./node_modules/@cornerstonejs/core/dist/esm/utilities/getViewportsWithImageURI.js
 @ ./node_modules/@cornerstonejs/core/dist/esm/utilities/index.js
 @ ./node_modules/@cornerstonejs/core/dist/esm/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/babel-loader/lib??ref--15!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.152:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/Viewport.js

Module parse failed: Unexpected token (448:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         }
|         const actorEntry = this.getDefaultActor();
>         if (actorEntry?.actor?.isA('vtkVolume')) {
|             this.updateClippingPlanesForActors(updatedCamera);
|         }

 @ ./node_modules/@cornerstonejs/core/dist/esm/index.js 8:0-50 26:0-661
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/babel-loader/lib??ref--15!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.152:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/StackViewport.js

Module parse failed: Unexpected token (910:51)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
|                 const metadata = this._getImageDataMetadata(image);
>                 image.isPreScaled = image.preScale?.scaled;
|                 const viewport = getDefaultViewport(this.canvas, image, this.modality, this._cpuFallbackEnabledElement.viewport.colormap);
|                 this._cpuFallbackEnabledElement.image = image;

 @ ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/RenderingEngine.js 8:0-44 157:39-52 315:27-40 358:29-42
 @ ./node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/index.js
 @ ./node_modules/@cornerstonejs/core/dist/esm/utilities/getViewportsWithImageURI.js
 @ ./node_modules/@cornerstonejs/core/dist/esm/utilities/index.js
 @ ./node_modules/@cornerstonejs/core/dist/esm/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/babel-loader/lib??ref--15!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue?vue&type=script&lang=js&
 @ ./src/views/pages/View.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.152:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

what am i doing wrong please tell me?

[AmrGablla]

I think you need to initialize cornerstoneWADOImageLoader or the correct loader for you files.

[dima9911]

@AmrGablla i just import RenderEngine and have this issue. do not try add more code, because vue-cli-service serve crashed.

i think problem there

actorEntry?.actor;

probably my webpack file loader do not understand ? characters

[abby0127]

Did you find a solution?

[napest]

+1 for this issue

[sedghi]

Can you create a public repo for what you are trying to do and share it with me? thanks

[dima9911]

@abby0127 @napest @sedghi

i solved it. the problem was in the optional chaining characters.

for example like this

     image.isPreScaled = image.isPreScaled || image.preScale?.scaled;

vue-cli of the old versions ~4 cannot build this. to make it work, I updated it at my system with vue upgrade to ~5.
And made changes to babel config with two plugins

    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",

After, error with optional chaining has been solved. But cornerstone 3dbeta monorepo missmatch @vtk.js dependence. I install it myself.

Now cornerstone 3dbeta version is installed and built without problems.

Environment Info:

  System:
    OS: macOS 11.6.8
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: Not Found
    Firefox: 108.0.1
    Safari: 16.3
  npmPackages:
    @ant-design/icons-vue:  2.0.0 
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.4.0 
    @vue/babel-preset-app:  5.0.8 
    @vue/babel-preset-jsx:  1.4.0 
    @vue/babel-sugar-composition-api-inject-h:  1.4.0 
    @vue/babel-sugar-composition-api-render-instance:  1.4.0 
    @vue/babel-sugar-functional-vue:  1.4.0 
    @vue/babel-sugar-inject-h:  1.4.0 
    @vue/babel-sugar-v-model:  1.4.0 
    @vue/babel-sugar-v-on:  1.4.0 
    @vue/cli-overlay:  5.0.8 
    @vue/cli-plugin-babel: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-e2e-cypress: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-router: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-unit-jest: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-vuex: ~5.0.8 => 5.0.8 
    @vue/cli-service: ~5.0.8 => 5.0.8 
    @vue/cli-shared-utils:  5.0.8 
    @vue/compiler-sfc:  2.7.10 (2.7.14)
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/test-utils: ^1.0.3 => 1.3.0 
    @vue/vue2-jest: ^27.0.0-alpha.3 => 27.0.0 
    @vue/web-component-wrapper:  1.3.0 
    ant-design-vue: ^1.7.8 => 1.7.8 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^8.0.3 => 8.7.1 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.11 => 2.7.10 (2.7.14)
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-eslint-parser:  8.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: 8 => 8.28.2 
    vue-loader:  17.0.1 (15.10.1)
    vue-notification: ^1.3.20 => 1.3.20 
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-range-component: ^1.0.3 => 1.0.3 
    vue-ref:  2.0.0 
    vue-router: ^3.2.0 => 3.6.5 
    vue-sidebar-menu: 4 => 4.8.1 
    vue-style-loader:  4.1.3 
    vue-template-babel-compiler: ^2.0.0 => 2.0.0 
    vue-template-compiler: ^2.6.11 => 2.7.14 
    vue-template-es2015-compiler:  1.9.1 
    vue-underscore: ^0.1.4 => 0.1.4 
    vue-url-state-sync: ^0.1.1 => 0.1.1 
    vuex: ^3.4.0 => 3.6.2 

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset", "@babel/preset-env"],
  plugins: [
    "wildcard",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
  ],
};

[sedghi]

@dima9911 This is great explanation! Thanks a lot!

[abby0127]

I've got a new problem.