Vtk-js: Rendering a polydata in a div + React

[kabhari]

Objective: to display a polydata in a div using React
Method:
in App.js, I have:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.vtkRef = React.createRef();
  }

  componentDidMount() {
    const container = this.vtkRef.current;
    update(container);
  }

  render() {
    return <div ref={this.vtkRef} style={{width: 500, height: 500}}/>;
  }
}

The update(container) calls:

const update = (container) => {
        // bunch of stuff happening
        // ...
        const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
        renderWindow.addView(openglRenderWindow);

        openglRenderWindow.setContainer(container);
        const {width, height} = container.getBoundingClientRect();
        openglRenderWindow.setSize(width, height);

        const interactor = vtkRenderWindowInteractor.newInstance();
        interactor.setView(openglRenderWindow);
        interactor.bindEvents(container);
        interactor.initialize();
        interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance()); 
}

In addition, I followed the instruction in this thread to make sure the webpack.config.js is setup correctly. To be specific, I ran npm run eject, modified the webpack.config.js by following this instruction, remove the node modules directory followed by npm install and npm i worker-loader

Now I'm getting this error:

My guess is this has to do something with how I configured the webpack or passing the container as I tested the code without React and had no issues whatsoever.

Any comments is greatly appreciated.

[jourdain]

You are missing the loaders for vtk.js

[kabhari]

Thanks for the quick reply @jourdain.

I added the following snippet to the webpack.config.js under rules:

...
      {
          test: /\.worker\.js$/,
          include: /vtk\.js[\/\\]Sources/,
          use: [
            {
              loader: 'worker-loader',
              options: { inline: true, fallback: false },
            },
          ],
        },
...

Is this what you were referring to? If so, I'm still getting the same error.

Cheers.

[jourdain]

https://github.com/Kitware/vtk-js/blob/master/Utilities/config/dependency.js

[jourdain]

https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html

[kabhari]

My understanding is that by concatenating the vtk-rules (from vtk.js/Utilities/config/dependency.js), the necessary loaders including shader-loader, worker-loader, etc are automatically added. I also added { test: /\.html$/, loader: 'html-loader' } just in case . Nonetheless, I'm still getting the same error. Perhaps I'm missing something obvious? Either way, you can close the ticket if there is not much to add.

Thanks!

[jourdain]

shader-loader, worker-loader are indeed the two that you need. Did you try to follow the guides?

[kabhari]

Thanks for your reply @jourdain.

I surely did follow the instruction. The thing is I was using create-react-app and decided to start all over again without it and now it works just fine.

Thanks again.

[thewtex]

For future reference, this project can be helpful to add the required loaders in the required order for create-react-app:

https://github.com/thewtex/craco-vtk