Rendering a polydata in a div + React

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.

[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

[jourdain]

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