# TypeError: vtiReader.parseAsArrayBuffer is not a function
**URL:** https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126
**Category:** Development
**Created:** [November 10, 2021, 6:26am UTC](https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126 "2021-11-10T06:26:02Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Sneha-pk](https://discourse.vtk.org/u/Sneha-pk)
#### Post date: [November 10, 2021, 6:26am UTC](https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126/1 "2021-11-10T06:26:03Z")
Hello all,
I am very new to vtk.js and trying to recreate one of the example in react.js. I am getting this error : TypeError: vtiReader.parseAsArrayBuffer is not a function
````auto
import 'vtk.js/Sources/Rendering/Profiles/Volume';
import 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
import vtkVolumeController from 'vtk.js/Sources/Interaction/UI/VolumeController';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
const View = () => {
const vtkContainerRef = useRef(null);
const context = useRef(null);
function makeRequest(method, url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText,
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText,
});
};
xhr.send();
});
}
useEffect( () => {
if (!context.current) {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
rootContainer : vtkContainerRef.current
});
const createViewer = (res) => {
const vtiReader = vtkHttpDataSetReader.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
vtiReader.parseAsArrayBuffer(res);
const source = vtiReader.getOutputData(0);
const mapper = vtkVolumeMapper.newInstance();
const actor = vtkVolume.newInstance();
actor.setMapper(mapper);
mapper.setInputData(source);
renderer.addVolume(actor);
const controllerWidget = vtkVolumeController.newInstance({
size : [400, 150], rescaleColorMap: true
});
controllerWidget.setContainer(vtkContainerRef);
controllerWidget.setupContent(renderWindow, actor, true);
fullScreenRenderer.setResizeCallback(({ width, height }) => {
// 2px padding + 2x1px boder + 5px edge = 14
if (width > 414) {
controllerWidget.setSize(400, 150);
} else {
controllerWidget.setSize(width - 14, 150);
}
controllerWidget.render();
});
renderer.resetCamera();
renderWindow.render();
global.pipeline = {
actor,
renderer,
renderWindow,
mapper,
source,
fullScreenRenderer,
};
context.current = {
fullScreenRenderer,
renderWindow,
renderer,
actor,
mapper,
};
};
makeRequest("GET","../head-binary.vti").then((res) => {
const reader = new FileReader();
reader.onload = function onLoad(e) {
createViewer(reader.result);
};
const file = new File([res], "head-binary.vti");
const fileObj = { file, ext: "vti" };
console.log(fileObj);
reader.readAsArrayBuffer(fileObj.file);
})
}
return () => {
if (context.current) {
const { fullScreenRenderer, actor, mapper } = context.current;
actor.delete();
mapper.delete();
fullScreenRenderer.delete();
context.current = null;
}
};
},[])
return (
View
)
}
export default View; ```
Please suggest what am i doing wrong...
````
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [November 10, 2021, 3:46pm UTC](https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126/2 "2021-11-10T15:46:02Z")
`vtkHttpDataSetReader` is not a VTI reader. That would be [vtkXMLImageDataReader](https://github.com/Kitware/vtk-js/tree/master/Sources/IO/XML/XMLImageDataReader) instead.
Also readers can make the network call for you if you prefer.
---
### Author:  [@Sneha-pk](https://discourse.vtk.org/u/Sneha-pk)
#### Post date: [November 11, 2021, 7:25am UTC](https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126/3 "2021-11-11T07:25:36Z")
@Sebastien_Jourdain thanks for your reply. I have made the changes but there is still an error:
TypeError: model.container.appendChild is not a function
```auto
const View = () => {
const vtkContainerRef = useRef(null);
const context = useRef(null);
useEffect( () => {
if (!context.current) {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
rootContainer : vtkContainerRef.current
});
const vtiReader = vtkXMLImageDataReader.newInstance({ fetchGzip: true });
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const source = vtiReader.getOutputData(0);
const mapper = vtkVolumeMapper.newInstance();
const actor = vtkVolume.newInstance();
vtiReader.setUrl('https://kitware.github.io/vtk-js-datasets/data/vti/LIDCFull.vti')
// https://data.kitware.com/#item/59de9dc98d777f31ac641dc1')
.then(() => vtiReader.loadData())
.then(() => {
console.log(vtiReader)
renderer.addVolume(actor);
renderer.resetCamera();
vtiReader.parseAsArrayBuffer();
renderWindow.render();
})
actor.setMapper(mapper);
mapper.setInputData(source);
renderer.addVolume(actor);
const controllerWidget = vtkVolumeController.newInstance({
size : [400, 150], rescaleColorMap: true
});
// controllerWidget.setContainer(vtkContainerRef);
// controllerWidget.setupContent(renderWindow, actor, true);
fullScreenRenderer.setResizeCallback(({ width, height }) => {
if (width > 414) {
controllerWidget.setSize(400, 150);
} else {
controllerWidget.setSize(width - 14, 150);
}
controllerWidget.render();
});
renderer.resetCamera();
renderWindow.render();
global.pipeline = {
actor,
renderer,
renderWindow,
mapper,
source,
fullScreenRenderer,
};
context.current = {
fullScreenRenderer,
renderWindow,
renderer,
actor,
mapper,
};
};
return () => {
if (context.current) {
const { fullScreenRenderer, actor, mapper } = context.current;
actor.delete();
mapper.delete();
fullScreenRenderer.delete();
context.current = null;
}
};
},[])
return (
View
)
}
export default View;
```
If i remove the following line :
controllerWidget.setContainer(vtkContainerRef);
```
controllerWidget.setupContent(renderWindow, actor, true);
```
It gives No INPUT in the console. I don’t understand why is that. Please let me know if you see the problem. I am new to vtk.js and still in the trying to understand phase.
Appreciate your help.
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [November 12, 2021, 12:45am UTC](https://discourse.vtk.org/t/typeerror-vtireader-parseasarraybuffer-is-not-a-function/7126/4 "2021-11-12T00:45:58Z")
Since you are using react to include your 3D view, you should not use `fullScreenRenderer` which is meant for examples and be FullScreen.
If you want to stay in the React world, then you can look at react-vtk-js [View](https://github.com/Kitware/react-vtk-js/blob/master/src/core/View.js) and [VolumeController](https://github.com/Kitware/react-vtk-js/blob/master/src/core/VolumeController.js) which get used [here](https://github.com/Kitware/react-vtk-js/blob/master/usage/Volume/VolumeRendering.js)