Using vtk.js as an ES6 dependency

Hello,

I can’t get this tutorial to work:

What I want to achieve is use vtk.js from an Angular app.

Let me see if my understanding is correct:

  1. We need to webpack vtk.js to make it work, right? This is different from wslink that you install it with npm install and you can start working with it, correct?
  2. I follow the tutorial. When I arrive to webpack config it says:

var entry = path.join(__dirname, ‘./src/index.js’);

do you mean?

var entry = path.join(__dirname, ‘./node_modules/vtk.js/Sources/index.js’);

because we want to webpack vtk.js, not the project I am building, right. To start with, I do not have ‘./src/index.js’ as I am developing an Angular10 app. I have sthg like ./src/main.ts.

  1. (cosmetics) there is typo in package.json.It should say --color not --colors

  2. After doing above changes, I am ready to build. npm run build. I get a lot of errors:

ERROR in ./node_modules/vtk.js/Sources/Filters/General/PaintFilter/PaintFilter.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
ValidationError: Invalid options object. Worker Loader has been initialized using an options object that does not match the API schema.

  • options has an unknown property ‘fallback’. These properties are valid:
    object { worker?, publicPath?, filename?, chunkFilename?, inline?, esModule? }
  • options.inline should be one of these:
    “no-fallback” | “fallback”
    at validate (C:\projects_web\evoker\ng10-client\node_modules\worker-loader\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.pitch (C:\projects_web\evoker\ng10-client\node_modules\worker-loader\dist\index.js:59:29)
    @ ./node_modules/vtk.js/Sources/Filters/General/PaintFilter/index.js 7:0-94 43:21-38
    @ ./node_modules/vtk.js/Sources/Filters/General/index.js 12:0-43 29:2-16
    @ ./node_modules/vtk.js/Sources/Filters/index.js 3:0-32 9:2-9
    @ ./node_modules/vtk.js/Sources/index.js 2:0-32 13:14-21

ERROR in ./node_modules/vtk.js/Sources/Interaction/Widgets/PiecewiseGaussianWidget/ComputeHistogram.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
ValidationError: Invalid options object. Worker Loader has been initialized using an options object that does not match the API schema.

  • options has an unknown property ‘fallback’. These properties are valid:
    object { worker?, publicPath?, filename?, chunkFilename?, inline?, esModule? }
  • options.inline should be one of these:
    “no-fallback” | “fallback”
    at validate (C:\projects_web\evoker\ng10-client\node_modules\worker-loader\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.pitch (C:\projects_web\evoker\ng10-client\node_modules\worker-loader\dist\index.js:59:29)
    @ ./node_modules/vtk.js/Sources/Interaction/Widgets/PiecewiseGaussianWidget/index.js 4:0-63 497:25-47
    @ ./node_modules/vtk.js/Sources/Proxy/Core/PiecewiseFunctionProxy/index.js 3:0-100 78:8-67
    @ ./node_modules/vtk.js/Sources/Proxy/Core/index.js 3:0-65 11:2-27
    @ ./node_modules/vtk.js/Sources/Proxy/index.js 1:0-26 4:2-6
    @ ./node_modules/vtk.js/Sources/index.js 7:0-31 17:12-20

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js 9:0-34

Can you please help me?

Best,

Francesc

You can use vtk.js as-is if you don’t know/want to process sources of another project as it has been transpiled to standard JS as well.

Webpack is not required by any means, we just took that technology to describe how you would do it.

I think @Forrest has an example on how to do it with Angular.

That doc explain how to use your project with webpack and bring vtk.js as a source dependency. So the guide is indeed correct.

If you want to use the bundled version, you can refer to that other guide.

Here is an example Angular project that integrates vtk.js: https://github.com/floryst/vtk-js-angular-10

Thanks @Sebastien_Jourdain and @Forrest .

I did find Forrest tutorial before reading your replies and I am able to use vtk.js from Angular now.

I am still in my learning curve. I apologize in advance for this and future questions.