no.input error when using vtk.js in react

Im just trying to run the polydatareader example with my data in a react project. I am getting an error on load and on button press stating that there is no input.

here is the code I am using:

import React from 'react';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkPolyDataReader from 'vtk.js/Sources/IO/Legacy/PolyDataReader';

export default class VtkGeometryRenderer extends React.Component {
  constructor (){
    super();
  }
  shouldComponentUpdate(){
    return false;
  }
  componentDidMount(){
//vtk.js try
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

const resetCamera = renderer.resetCamera;
const render = renderWindow.render;


const reader = vtkPolyDataReader.newInstance();
reader.setUrl(`./Assets/cube_ascii.vtp`).then(() => {
  const polydata = reader.getOutputData(0);
  const mapper = vtkMapper.newInstance();
  const actor = vtkActor.newInstance();

  actor.setMapper(mapper);
  mapper.setInputData(polydata);

  renderer.addActor(actor);

  resetCamera();
  render();
});

global.reader = reader;
global.fullScreenRenderer = fullScreenRenderer;

  }
  render() {

    return (
          <div
              ref={(c) => {
              this.rootContainer = c;
            }}
          />
        );
};

and here is the error message and screen im getting on load:

[ghost]

Well the data loads now. I think I can work on making the react component valid on my own. I appreciate all the help, thank you very much.

[jourdain]

I’m not saying react is producing that error, I’m just saying that your react component is not valid. But like I said, you are not there yet… The main issue right now is that the data does not load.

But looking closer at your code, the issue is related to your import. vtk.js/Sources/IO/Legacy/PolyDataReader is meant for vtk files not vtp. You need to use the XML version which is available here: https://github.com/Kitware/vtk-js/tree/master/Sources/IO/XML/XMLPolyDataReader