Can't render any shader in React: `Failed to execute 'shaderSource'`

Question

I'm trying to render a simple shader, but with every library I use (gl-react, shadertoy-react, etc), i get the error:

TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.
    at compileShader (shader-cache.js:55:1)
    at proto.getShaderReference (shader-cache.js:75:1)
    at Object.getShaderReference [as shader] (shader-cache.js:131:1)
    at 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)
(

Here is a sandbox recreating the issue: CodeSandbox.

I know for sure that the shader works because I have tested it, but can't make it work in React. The only library that I got to work was react-three-fiber, but I get other problems with that as well (see StackOverflow).

score 0 · Answer 1 · answered Apr 23 '23 at 17:59

I changed my index.tsx from:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

to

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

and now it works.

Can't render any shader in React: `Failed to execute 'shaderSource'`

1 Answers1