Cannot read property 'isUniformUsed' of null in PublicAPI.setMapperShaderParameters

[chucksspencer]

We're trying to integrate vtk.js into an existing react app (create-react-app). We ejected the app and made the changes to webpack per the documentation and got it building and running. However when we try to render anything we get the following error at runtime:

TypeError: Cannot read property 'isUniformUsed' of null publicAPI.setMapperShaderParameters node_modules/vtk.js/Sources/Rendering/OpenGL/PolyDataMapper/index.js:1113

Code

We're just trying to get a simple example rendering using the following code from various samples. All we're trying to do is render a simple cone.

    const coneSource = vtkConeSource.newInstance({ height: 1.0 });

    const mapper = vtkMapper.newInstance();
    mapper.setInputConnection(coneSource.getOutputPort());
    
    const actor = vtkActor.newInstance();
    actor.setMapper(mapper);    

    this.renderer.addActor(actor);
    this.renderer.resetCamera();

If we exclude the this.renderer.addActor(actor); line that actually adds the actor, we do not see this error - simply the blank black window.

Screenshots

Here's a partial stack trace from the error:

vtk.js version:
"vtk.js": "^17.2.2",

[daker]

check #1096, cra doesn't supports loading webworkers and you need to eject

facebook/create-react-app#5886

[chucksspencer]

Yes - this is after ejecting and adding the webpack bits per the guide:
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

and

rules: [...lots of other rules in here from the ejected config...].concat(vtkRules)

This should pull in the rules for the worker-loader and shader-loader from vtk.js/Utilities/config/dependency.js, yes?

Another note - I did have to install the shader-loader npm package (v1.3.1) to solve an earlier build error:
Module not found: Can't resolve 'shader-loader'

[daker]

Yes shader-loader, worker-loader are needed.

[chucksspencer]

@daker Thanks for the response. The rules for shader-loader and worker-loader are in the webpack.config.js, and the npm packages are installed. The problem is still happening.

[jourdain]

I think @floryst has some doc that are still work in progress for (create-react-app) and else. He might have some input for you.

[chucksspencer]

The craco-vtk library got me going - all without having to eject the config. One thing that may be worth noting is that I had an old-ish (<3.0) version of react-scripts. Anyway - thanks for the help!

[dzungtum]

@chucksspencer, @jourdain

I have solved the problem. It is because the vtkRules will not be considered and still ignored by webpack if we add it like the following

rules: [...lots of other rules in here from the ejected config...].concat(vtkRules)

Instead what I did:

(1) Eject

(2) Add vtkRules like this

Note that: vtkRules is added at line 480 right before file-loader. Any loader added after file-loader will be ignored as the convention made by oneOf