Custom VTK Component error: Uncaught TypeError: Cannot create proxy with a non-object as target or handler

Hello Guys,

I’ll apologize in advance because I have reduced experience in React.

I’m trying to make vtk based custom component, but I’m struggling with just the basics as I can’t reproduce a simple Vtk example (this one taken from sandbox: react-vtk-js base - CodeSandbox )

I used the boilerplate to create a custom VtkPlotter component, and I’m replacing the example class component in the vtk_plotter/src/lib/components/VtkPlotter.react.js with the code present from sandbox. I’ve added the required properites to be able to npm run build.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    View,
    GeometryRepresentation,
    PolyData,
    PointData,
    DataArray,
    ShareDataSet
  } from "react-vtk-js";

const Demo=()=>
{
  return <div className="App" style={{ width: "750px", height: "750px" }}>
    <ShareDataSet name={"lightPlane"}>
        <PolyData
        points={[0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0]}
        polys={[4, 0, 3, 2, 1]}
        >
        <PointData>
            <DataArray
            registration="setScalars"
            name="Temperature"
            values={[0.1, 0.2, 0.6, 0.9]}
            />
        </PointData>
        </PolyData>
    </ShareDataSet>
    <View cameraPosition={[0, 0, 1]}>
        <GeometryRepresentation
        mapper={{
            colorByArrayName: "Temperature",
            scalarMode: 3,
            interpolateScalarsBeforeMapping: true
        }}
        colorDataRange={[0, 1]}
        colorMapPreset="Black-Body Radiation"
        >
        <ShareDataSet name={"lightPlane"} />
        </GeometryRepresentation>
    </View>
    </div>;
}

export default Demo;

VtkPlotter.defaultProps = {};

VtkPlotter.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    /**
     * A label that will be printed when this component is rendered.
     */
    label: PropTypes.string,

    /**
     * The value displayed in the input.
     */
    value: PropTypes.string,

    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func
};

VtkPlotter.defaultProps = {};

VtkPlotter.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    /**
     * A label that will be printed when this component is rendered.
     */
    label: PropTypes.string,

    /**
     * The value displayed in the input.
     */
    value: PropTypes.string,

    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func
};

The error that it returns in the console browser:

Uncaught TypeError: Cannot create proxy with a non-object as target or handler
    at publicAPI.get3DContext (output.js:58258:12)
    at publicAPI.initialize (output.js:58149:33)
    at publicAPI.buildPass (output.js:58140:17)
    at publicAPI.apply (output.js:64527:7)
    at publicAPI.traverse (output.js:64514:15)
    at publicAPI.traverse (output.js:52230:14)
    at publicAPI.traverseAllPasses (output.js:58826:35)
    at forceRender (output.js:47427:19)
    at publicAPI.render (output.js:47853:7)
    at publicAPI.initialize (output.js:47110:15)

output.js:108639 The above error occurred in the <w> component:
    in w (created by Context.Consumer)
    in ForwardRef (created by Demo)
    in div (created by Demo)
    in Demo (created by App)
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ output.js:108639

If anyone could help me in the “proxy” error I’d be tremendously thankful!