Vtk-js: Setup VTKjs with React issue

[thinhly197]

I'm making the React project which uses VTK, and ITK libs, but I got the issue as below.
TypeError: Cannot read property 'isUniformUsed' of null

with file in vtkjs
/node_modules/vtk.js/Sources/Rendering/OpenGL/PolyDataMapper/index.js:703

  700 | 
  701 | publicAPI.setMapperShaderParameters = function (cellBO, ren, actor) {
  702 |   // Now to update the VAO too, if necessary.
> 703 |   if (cellBO.getProgram().isUniformUsed('PrimitiveIDOffset')) {
      | ^  704 |     cellBO.getProgram().setUniformi('PrimitiveIDOffset', model.primitiveIDOffset);
  705 |   }
  706 | 

Please help me! Thanks

[thinhly197]

I got this error since I follow this doc.
https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html
At the step
.concat(vtkRules)

If I don't import it, and I need to use macro.js, it will complain.
\node_modules\vtk.js\Sources\macro.js:1 (function (exports, require, module, __filename, __dirname) { import vtk from './vtk'; ^^^

[jourdain]

It looks like a runtime issue. You will have to explain more how you create your dataset for visualization.

[thinhly197]

I combine daikon js, and itk js also. I have ITK object, and convert it to VTK object

import ITKHelper from vtk.js/Sources/Common/DataModel/ITKHelper

const imageData = ITKHelper.convertItkToVtkImage(itkImage);

[jourdain]

Is you itkImage object valid? Does itkImage.data have content?

[thinhly197]

yes, it has data content.
I think it come from the webpack, or babel environment setup. Because if I copy this code to itk-vtk-viewer project, it can work.
But since I create new React project I got this issue

[jourdain]

I think it comes from the installation process of itk.js into your project as I think for your specific usecase that itkImage.data does not get properly filled.

[thinhly197]

Thanks. I will check again, and come back if any.

[thewtex]

It is worth checking out create-itk-app, which sets up create-react-app with Webpack configuration for vtk.js and itk.js provided.

Here is what is added for the vtk.js Webpack config:

https://github.com/thewtex/craco-vtk/blob/539fcdfe8898c7fc927c7b261bb6866a215b92ed/index.js#L4-L12

and here is what is added for the itk.js Webpack config:

https://github.com/InsightSoftwareConsortium/craco-itk/blob/5b65a99f465930d92d158a631e578edf90ffff50/index.js#L5-L32

[thinhly197]

Thank you. Great!

[markonikovic5]

Hello @thewtex , how are you?
I am learning VTK with rescripts react, I have same error like above.
I set as VTK doc but I have error yet.

I wish you help asap.

[fhrryDeveloper]

I have same issue with @markonikovic5

[markonikovic5]

Hello @fhrryDeveloper , Did you check this discussion?
https://github.com/Kitware/vtk-js/issues/1042