Loading the VTK file

I wrote the following code to be able to load the VTK file, but the page is white and the geometry is not visible.
Also I get this message in the console:“VTK container ref is not defined.”

import React, { useEffect, useRef, useState } from 'react';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';

function VTKViewer() {
    const vtkContainerRef = useRef(null);
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        if (!vtkContainerRef.current) {
            console.warn('VTK container ref is not defined.');


        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
            rootContainer: vtkContainerRef.current,
            containerStyle: { height: '100%', width: '100%' },

        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        const actor = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();

        const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });

        reader.setUrl('/home/sample/test.vtk').then(() => {

        return () => {
    }, []);

    return isMounted ? <div ref={vtkContainerRef} style={{ width: '100%', height: '100%' }} /> : null;

export default VTKViewer;

Do not forget to load a profile file

Thanks for your response. I didn’t get your point. Can you explain more?

Please import the Geometry profile:

You should add vtkContainerRef to the useEffect dependecies because what you are doing is running the useEffect for the first render and it will not trigger again what it’s inside I hope that could solve your problem

//your code 
}, [vtkContainerRef])

and try to install the kitware package “@kitware/vtk.js”: “^29.1.3”
your import should be something like that
also add the geometry as @finetjul said

import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkHttpDataSetReader from "@kitware/vtk.js/IO/Core/HttpDataSetReader";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

that’s works for me I’m using react to