Error in NEXT.js "Failed to execute 'shaderSource' on 'WebGLRenderingContext'..."

[jonayWaka]

I tried to install and run the demo in a Next.js project, and it prompt this error:

TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.

To Reproduce Steps to reproduce the behavior:

1. npm i shadertoy-react
2. import ShadertoyReact from "shadertoy-react";
3. Declare ``` const fragmentShader = void main(void) { vec2 uv = gl_FragCoord.xy/iResolution.xy; vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4)); gl_FragColor = vec4(col ,1.0); };

4. Include component inside render function `<ShadertoyReact fs={fragmentShader} />`.

**Expected behavior**
Same as demo.


**Desktop (please complete the following information):**
 - MacOs Monterey
 - Chrome
 - Versión 107.0.5304.110 (Build oficial) (x86_64)

[zdenham]

Hi @jonayWaka , I know this issue is a bit stale, but I ran into the same thing. If you are using create-next-app it will initialize it with reactStrictMode set to true.

In development this runs double renders to help identify non-deterministic side effects, but this causes issues with shadertoy-react

The solve is to set reactStrictMode to false in your next.config.js.