Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'

[yukosgiti]

Library Version

I use React 18.

├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Expected Behavior

const shaders = Shaders.create({
  helloGL: {
    frag: GLSL`
      precision highp float;
      varying vec2 uv;
      uniform float blue;
      void main() {
        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
      }`
  }
});
class Example extends Component {
  render() {
    return (
      <Surface width={300} height={300}>
        <ShaderCanvas shader={shaders.helloGL} />
      </Surface>
    );
  }
}
function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Example />
   </div>
  );
}

This code to render.

Actual behavior

I get the following error:

createSurface.js:498 TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.
    at compileShader (shader-cache.js:55:1)
    at ContextCache.proto.getShaderReference (shader-cache.js:75:1)
    at Object.getShaderReference [as shader] (shader-cache.js:131:1)
    at Shader.proto.update (index.js:109:1)
    at createShader (index.js:255:1)
    at Surface._makeShader (createSurface.js:538:1)
    at Surface._getShader (createSurface.js:547:1)
    at Node._getShader (Node.js:764:1)
    at Node._draw (Node.js:828:1)
    at Surface._draw (createSurface.js:590:1)

From my limited debugging, in the compileShader

function compileShader(gl, type, src) {
    var shader = gl.createShader(type)
    ...
}

The shader variable is null. Whic gives the error I think.

type is 35633 and src is

"attribute vec2 _p;
varying vec2 uv;
void main() {
gl_Position = vec4(_p,0.0,1.0);
uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
}
#define SHADER_NAME helloGL"

Steps to reproduce the behavior

I tried to implement the first example in the docs. I get this error in Opera, Firefox and Chrome.

[guidovizoso]

A little more context: It happens on React 18 only. Just tested it with a fresh project with React 17 and it's working.

It is also failing on everything shader related thing that I tried. Even making a shader program from scratch throws the same error so it's probably not related to the library per se but if @gre or someone with more WebGL experience can check it out it'd be better.

[gre]

Mmh curiously the cookbook uses React 18. I will have to recreate a basic example to try to reproduce.
But I'm using React + GL React ~ every week, making art projects of my own with it and never experienced this 👀

[guidovizoso]

Was able to pinpoint this issue to this file in gl-shader: https://github.com/stackgl/gl-shader/blob/master/lib/shader-cache.js (line 55). Guess it's out of the scope of the library though

[Morantron]

I think this is related to React 18 Strict Mode.

If you create a fresh project with create-react-app and add gl-react and gl-react-dom you can reproduce the issue.

If you comment the out strict mode in src/index.js the error goes away:

 const root = ReactDOM.createRoot(document.getElementById('root'));                                                                                                                 
  root.render(                                                                                                                                                                       
-    <React.StrictMode>                                                                                                                                                               
      <App />                                                                                                                                                                        
-    </React.StrictMode>                                                                                                                                                              
  );