Error when adding rectangle widget to react-vtkjs-viewport


I am trying to expand on the current react-vtkjs-viewport created by OHIF found here: GitHub - OHIF/react-vtkjs-viewport: VTK.js image viewport component in React, which currently allows for a basic paintWidget to be viewed, such as in this example: @vtk-viewport

I’d like to expand the number of wdigets available in this viewport, to more closely match the example provided by vtk.js found here: vtk.js

I’ve began adding the rectangleWidget to the react-vtkjs-viewport by following vtkjs’s example linked above. I can create a new instance of vtkRectangleWidget along with the pre-existing paintWidget like so:

    this.paintWidget = vtkPaintWidget.newInstance();
    this.rectangleWidget = vtkRectangleWidget.newInstance({
      resetAfterPointPlacement: true,

and create a manipulator for the rectangleWidget. However, when I try adding the widget to the widget manager using the following code:

  this.rectangleHandle = this.widgetManager.addWidget(

I receive the following error:

macro.js:64 Error compiling shader '#version 300 es

along with a bunch of source code which looks to be GLSL and webGL code written by kitware.

I also receive the following error:

index.js:383 Uncaught TypeError: Cannot read properties of null (reading 'isAttributeUsed')
    at Object.publicAPI.setMapperShaderParameters (index.js:383)
    at Object.publicAPI.updateShaders (index.js:367)
    at Object.publicAPI.renderPieceDraw (index.js:918)
    at Object.publicAPI.renderPiece (index.js:1037)
    at publicAPI.volumePass (index.js:74)
    at Object.publicAPI.apply (index.js:44)
    at Object.publicAPI.traverse (index.js:32)
    at publicAPI.traverseVolumePass (index.js:49)
    at Object.publicAPI.traverse (index.js:27)
    at Object.publicAPI.traverse (index.js:35)

I’m having a hard time pinpointing where the problem is in my code. If I log this.rectangleHandle to my console after assigning it, it appears to have been properly initialized. Am I missing a step to add this widget? Thank you for any advice you can offer.

react-vtkjs-viewport is using an older version of vtk.js, so I’m not entirely sure what the underlying issue is. In any case, this could be a bundling issue (shaders are incorrectly being transpiled). Does anything in the scene get rendered, or does this error only happen when you try to add the widget?

Thanks for the response Forrest,

The scene renders without errors before adding the widget to the widget manager. If you look at the live example which I am altering here @vtk-viewport, you will see a radio button that says “paint”

When that button is pressed, the following code is ran:

if (prevProps.painting !== this.props.painting) {
      if (this.props.painting) {
        this.viewWidget = this.widgetManager.addWidget(


which is what throws the errors when paintWidget is replaced with rectangleWidget

Do you think it may be worth trying to update the version of VTK in the repository?

I vaguely remember that updating VTK.js causes some part of react-vtkjs-viewport to break, but you can certainly try it to verify. Otherwise, this would need some digging in order to figure out why there is a shader error.