Vtk-js: ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl 18:10

[thesharkm4n]

Hi,

I was trying to follow the example on https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html and am reaching an error (at the bottom of the message).

I have gone through the example a few times on separate computers and hit the wall at the same point. Its possible I am missing something, but i am sure I have followed the example properly, but I am not very experienced with JS, so maybe i am missing something.

Thanks

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl 18:10
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type.
| =========================================================================*/
|
> attribute vec4 vertexDC;
|
| varying vec3 vertexVCVSOutput;
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js 20:0-80 83:21-32
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl 18:10
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
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ImageMapper/index.js 18:0-84 92:21-34
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkSphereMapperVS.glsl 19:10
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;
|
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/SphereMapper/index.js 12:0-92 29:21-38
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkStickMapperVS.glsl 19:10
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;
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/StickMapper/index.js 7:0-90 27:21-37
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl 19:8
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
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/SphereMapper/index.js 13:0-84 30:23-36
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl 22:8
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
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js 21:0-80 87:25-36
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS2.glsl 22:8
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
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js 22:0-82 85:25-37
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/OpenGL/RenderWindow/index.js
 @ ./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js
 @ ./src/index.js
 @ ./src/index.js-exposed

[jourdain]

The issues seems to be related to invalid loader rules. Like if it was missing the vtk.js rules.

[thesharkm4n]

Ahh thanks for pointing me in the right direction! I changed my web.pack.config from the one on https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html by adding { test: /.glsl$/i, loader: 'shader-loader' } and it seems to be working

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

// Optional if you want to load *.css and *.module.css files
var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;

var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'MyWebApp.js',
  },
  module: {
    rules: [
        { test: entry, loader: "expose-loader?MyWebApp" },
        { test: /\.html$/, loader: 'html-loader' },
        { test: /\.glsl$/i, loader: 'shader-loader' },
    ].concat(vtkRules),
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
  },
};

[sai-github]

Hey I am stuck at similar issue where do I set this webpack config for angular project ?

[dolremi]

@thesharkm4n Have you figured this out?

[floryst]

I made a quick & minimal working example of vtk.js in Angular 10 default template: https://github.com/floryst/vtk-js-angular-10

You can read the README.md for a general overview, and the second commit in the repo is the changeset from the default angular 10 template.

[mohghaderi]

@floryst Thanks for your sample angular code.

I have a lot of other rules in my webpack and didn't want to override all rules. So, I solved my problem by adding your rules to it:

`
const vtkRules = require('vtk.js/Utilities/config/dependency').webpack;

    Array.prototype.push.apply(cfg.module.rules, vtkRules.core.rules)

`

But adding css rules will break the build

Array.prototype.push.apply(cfg.module.rules, vtkRules.css.rules)

I assume we don't need css rules and all js rules will only apply to vtk.js. Right?

[floryst]

Yeah, you should be able to exclude the CSS rules for your angular project.

On September 3, 2020 8:42:31 PM UTC, Mohammad Ali Ghaderi [e-mail] wrote:

@floryst Thanks for your sample angular code.

I have a lot of other rules in my webpack and didn't want to override
all rules. So, I solved my problem by adding your rules to it:

`
const vtkRules = require('vtk.js/Utilities/config/dependency').webpack;

 Array.prototype.push.apply(cfg.module.rules, vtkRules.core.rules)

`

But adding css rules will break the build

Array.prototype.push.apply(cfg.module.rules, vtkRules.css.rules)

I assume we don't need css rules and all js rules will only apply to
vtk.js. Right?

--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/Kitware/vtk-js/issues/1003#issuecomment-686754490