[vtkusers] Using vtk.js inside an angular project

Sebastien Jourdain sebastien.jourdain at kitware.com
Tue Jun 26 10:48:39 EDT 2018


Do you see the difference between the documentation doing this:

var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;

[...]

module: {
    rules: [
        { test: entry, loader: "expose-loader?MyWebApp" },
        { test: /\.html$/, loader: 'html-loader' },
    ].concat(vtkRules),
  },



versus what you are doing below?

const vtkRules = require('./Utilities/config/rules-vtk.js');
const linterRules = require('./Utilities/config/rules-linter.js');
[...]
module: {
    rules: [
      { test: entry, loader: 'expose-loader?vtk' },
    ].concat(linterRules, vtkRules),
  },

The big difference in those two is the way the rules are defined to
interpret specific files (glsl, WebWorkers...).
In your case (taken from vtk.js webpack) you use rules that expect the
vtk.js files to be in ./Sources/** while in the top case we expect to find
the vtk.js files under ./node_modules/vtk.js/Sources/** as you are going to
use vtk.js as a dependency not as a first class citizen of your project.

HTH,

Seb

On Tue, Jun 26, 2018 at 7:16 AM marf <marvin.huber at basf.com> wrote:

> Hello, I'm trying to use vtk.js and angular together in a project and was
> just trying to get a basic setup running for now, but sadly whenever I try
> to build my project through
> npm run start
> it fails with the following errors, could anybody help me? I'm lost and
> couldn't really find anything. My guess would be that my webpack config is
> incomplete or anything, so I'll add that, too. But even if the error is in
> there, my knowledge in that topic is far to vague to figure the issue out
> myself.
>
>
>
> Error:
>
> WARNING in ./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js
> 1293:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not
> found in './ComputeGradients.worker.js'
>
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl
> Module parse failed: Unexpected token (18:10)
> You may need an appropriate loader to handle this file type.
> |
> =========================================================================*/
> |
> | attribute vec4 vertexDC;
> |
> | varying vec3 vertexVCVSOutput;
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl
> Module parse failed: Unexpected token (18:10)
> You may need an appropriate loader to handle this file type.
> |
> =========================================================================*/
> |
> | attribute vec4 vertexMC;
> |
> | // frag position in VC
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkSphereMapperVS.glsl
> Module parse failed: Unexpected token (19:10)
> You may need an appropriate loader to handle this file type.
> | // this shader implements imposters in OpenGL for Spheres
> |
> | attribute vec4 vertexMC;
> | attribute vec2 offsetMC;
> |
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkStickMapperVS.glsl
> Module parse failed: Unexpected token (19:10)
> You may need an appropriate loader to handle this file type.
> | // this shader implements imposters in OpenGL for Sticks
> |
> | attribute vec4 vertexMC;
> | attribute vec3 orientMC;
> | attribute vec4 offsetMC;
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl
> Module parse failed: Unexpected token (19:8)
> You may need an appropriate loader to handle this file type.
> | // Template for the polydata mappers fragment shader
> |
> | uniform int PrimitiveIDOffset;
> |
> | // VC position of this fragment
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS2.glsl
> Module parse failed: Unexpected token (22:8)
> You may need an appropriate loader to handle this file type.
> | //VTK::Output::Dec
> |
> | varying vec3 vertexVCVSOutput;
> |
> | // camera values
> ERROR in
> ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl
> Module parse failed: Unexpected token (22:8)
> You may need an appropriate loader to handle this file type.
> | //VTK::Output::Dec
> |
> | varying vec3 vertexVCVSOutput;
> |
> | // camera values
>
>
>
> webpack.config.js (I really didn't change anything in here since I barely
> get what the stuff is for... also this website didn't help me either:
> https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html )
>
> const webpack = require('webpack');
> const path = require('path');
>
> const entry = path.join(__dirname, './Source/index.js');
> const sourcePath = path.join(__dirname, './Source');
> const outputPath = path.join(__dirname, './dist');
>
> const vtkRules = require('./Utilities/config/rules-vtk.js');
> const linterRules = require('./Utilities/config/rules-linter.js');
>
> module.exports = {
>   entry,
>   output: {
>     path: outputPath,
>     filename: 'vtk.js',
>     libraryTarget: 'umd',
>   },
>   module: {
>     rules: [
>       { test: entry, loader: 'expose-loader?vtk' },
>     ].concat(linterRules, vtkRules),
>   },
>   resolve: {
>     modules: [
>       path.resolve(__dirname, 'node_modules'),
>       sourcePath,
>     ],
>     alias: {
>       'vtk.js': __dirname,
>     },
>   },
> };
>
>
>
> Thank you guys so much in advance
>
>
>
> --
> Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
> _______________________________________________
> Powered by www.kitware.com
>
> Visit other Kitware open-source projects at
> http://www.kitware.com/opensource/opensource.html
>
> Please keep messages on-topic and check the VTK FAQ at:
> http://www.vtk.org/Wiki/VTK_FAQ
>
> Search the list archives at: http://markmail.org/search/?q=vtkusers
>
> Follow this link to subscribe/unsubscribe:
> https://public.kitware.com/mailman/listinfo/vtkusers
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://public.kitware.com/pipermail/vtkusers/attachments/20180626/8e17e77e/attachment.html>


More information about the vtkusers mailing list