{"record":{"id":"5cbcbb20aba0ae0f","repo":"DavidHDev/react-bits","slug":"no-webgl-2-context-5cbcbb","errorCode":null,"errorMessage":"No WebGL 2 context!","messagePattern":"No WebGL 2 context!","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"src/tailwind/Components/InfiniteMenu/InfiniteMenu.jsx","lineNumber":636,"sourceCode":"  }\n\n  run(time = 0) {\n    this.#deltaTime = Math.min(32, time - this.#time);\n    this.#time = time;\n    this.#deltaFrames = this.#deltaTime / this.TARGET_FRAME_DURATION;\n    this.#frames += this.#deltaFrames;\n\n    this.#animate(this.#deltaTime);\n    this.#render();\n\n    requestAnimationFrame(t => this.run(t));\n  }\n\n  #init(onInit) {\n    this.gl = this.canvas.getContext('webgl2', { antialias: true, alpha: false });\n    const gl = this.gl;\n    if (!gl) {\n      throw new Error('No WebGL 2 context!');\n    }\n\n    this.viewportSize = vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);\n    this.drawBufferSize = vec2.clone(this.viewportSize);\n\n    this.discProgram = createProgram(gl, [discVertShaderSource, discFragShaderSource], null, {\n      aModelPosition: 0,\n      aModelNormal: 1,\n      aModelUvs: 2,\n      aInstanceMatrix: 3\n    });\n\n    this.discLocations = {\n      aModelPosition: gl.getAttribLocation(this.discProgram, 'aModelPosition'),\n      aModelUvs: gl.getAttribLocation(this.discProgram, 'aModelUvs'),\n      aInstanceMatrix: gl.getAttribLocation(this.discProgram, 'aInstanceMatrix'),\n      uWorldMatrix: gl.getUniformLocation(this.discProgram, 'uWorldMatrix'),\n      uViewMatrix: gl.getUniformLocation(this.discProgram, 'uViewMatrix'),","sourceCodeStart":618,"sourceCodeEnd":654,"githubUrl":"https://github.com/DavidHDev/react-bits/blob/c7109dccb42e06592d1d9bc50bc87204697240e2/src/tailwind/Components/InfiniteMenu/InfiniteMenu.jsx#L618-L654","documentation":"Identical throw to error 0 in the tailwind JSX variant of InfiniteMenu. The component calls canvas.getContext('webgl2', ...) in #init and aborts with 'No WebGL 2 context!' when it returns null, because the instanced-rendering pipeline it sets up (aInstanceMatrix attribute) has no WebGL1 equivalent.","triggerScenarios":"this.canvas.getContext('webgl2', { antialias: true, alpha: false }) returns null at src/tailwind/Components/InfiniteMenu/InfiniteMenu.jsx:636 during #init, so the class cannot finish constructing its discProgram.","commonSituations":"Same root causes as error 0: jsdom/happy-dom without a GL backend, disabled/blacklisted GPU drivers, browsers without WebGL2 (old Safari/iOS, some embedded WebViews), or running under a CI browser launcher with --use-gl=swiftshader that only exposes webgl1.","solutions":["Run a getContext('webgl2') probe before mounting InfiniteMenu and fall back to a non-WebGL menu.","For CI/headless use a WebGL2-capable software path (e.g. headless Chrome with SwiftShader WebGL2, or angle) instead of jsdom.","Check chrome://gpu / about:support; update drivers or browser if WebGL2 is listed as unavailable.","If embedding in a WebView, enable hardware acceleration and a WebGL2-capable renderer."],"exampleFix":"// before\nconst menu = new InfiniteMenu({ canvas });\n\n// after\nfunction hasWebGL2() {\n  try {\n    return !!document.createElement('canvas').getContext('webgl2');\n  } catch {\n    return false;\n  }\n}\nconst menu = hasWebGL2() ? new InfiniteMenu({ canvas }) : createFallbackMenu(canvas);","handlingStrategy":"validation","validationCode":"function supportsWebGL2(): boolean {\n  try {\n    return !!document.createElement('canvas').getContext('webgl2');\n  } catch {\n    return false;\n  }\n}\nif (!supportsWebGL2()) mountFallbackMenu();","typeGuard":"function hasWebGL2Context(canvas: HTMLCanvasElement): boolean {\n  return !!canvas.getContext('webgl2', { antialias: true, alpha: false });\n}","tryCatchPattern":null,"preventionTips":["Probe WebGL2 before mounting the tailwind InfiniteMenu.","Provide a CSS-only fallback menu for unsupported browsers.","In tests, use a WebGL2-capable headless browser or mock the module.","Check chrome://gpu to confirm WebGL2 is hardware-accelerated for end users."],"tags":["webgl2","gpu","context","initialization","browser-support","tailwind"],"backgroundTag":null,"analyzedSha":"c7109dccb42e06592d1d9bc50bc87204697240e2","analyzedAt":"2026-08-13T02:32:07.327Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}