# Using vtk.js as an ES6 dependency

**URL:** https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524
**Category:** Support
**Created:** [October 29, 2020, 6:35pm UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524 "2020-10-29T18:35:04Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Francesc](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/f/e47c2d/32.png) [@Francesc](https://discourse.vtk.org/u/Francesc)
#### Post date: [October 29, 2020, 6:35pm UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524/1 "2020-10-29T18:35:04Z")

</div>

Hello,

I can’t get this tutorial to work:

> **[Using vtk.js as an ES6 dependency](https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html)**
>
> This guide illustrates how to build an application using vtk.js as a dependency using a modern toolsets such as Webpack, NPM. Creation of the Project structure$ mkdir MyWebProject$ cd MyWebProject$ np

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

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [October 30, 2020, 4:09pm UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524/2 "2020-10-30T16:09:44Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [October 30, 2020, 4:13pm UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524/3 "2020-10-30T16:13:34Z")

</div>

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](https://kitware.github.io/vtk-js/docs/intro_vtk_as_external_script.html).

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [November 2, 2020, 4:41pm UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524/4 "2020-11-02T16:41:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Francesc](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/f/e47c2d/32.png) [@Francesc](https://discourse.vtk.org/u/Francesc)
#### Post date: [November 4, 2020, 6:20am UTC](https://discourse.vtk.org/t/using-vtk-js-as-an-es6-dependency/4524/5 "2020-11-04T06:20:02Z")

</div>

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.
