DavidHDev/react-bits · critical · Error

No WebGL 2 context!

Error message

No WebGL 2 context!

What it means

Tailwind/TypeScript variant of errors 0 and 6. InfiniteMenu.init calls canvas.getContext('webgl2', { antialias:true, alpha:false }) and throws when null because the instanced disc pipeline (aInstanceMatrix at slot 3) needs WebGL2 with no webgl1 fallback.

Source

Thrown at src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx:764

  public run(time = 0): void {
    this._deltaTime = Math.min(32, time - this._time);
    this._time = time;
    this._deltaFrames = this._deltaTime / this.TARGET_FRAME_DURATION;
    this._frames += this._deltaFrames;

    this.animate(this._deltaTime);
    this.render();

    requestAnimationFrame(t => this.run(t));
  }

  private init(onInit?: InitCallback): void {
    const gl = this.canvas.getContext('webgl2', {
      antialias: true,
      alpha: false
    });
    if (!gl) {
      throw new Error('No WebGL 2 context!');
    }
    this.gl = gl;

    vec2.set(this.viewportSize, this.canvas.clientWidth, this.canvas.clientHeight);
    vec2.clone(this.drawBufferSize);

    this.discProgram = createProgram(gl, [discVertShaderSource, discFragShaderSource], null, {
      aModelPosition: 0,
      aModelNormal: 1,
      aModelUvs: 2,
      aInstanceMatrix: 3
    });

    this.discLocations = {
      aModelPosition: gl.getAttribLocation(this.discProgram!, 'aModelPosition'),
      aModelUvs: gl.getAttribLocation(this.discProgram!, 'aModelUvs'),
      aInstanceMatrix: gl.getAttribLocation(this.discProgram!, 'aInstanceMatrix'),
      uWorldMatrix: gl.getUniformLocation(this.discProgram!, 'uWorldMatrix'),

View on GitHub (pinned to c7109dccb4)

Solutions

1. Probe WebGL2 support before mounting InfiniteMenu and render a fallback if absent.
2. In tests, use a WebGL2-capable headless browser or mock the component.
3. Update GPU drivers/browser; confirm chrome://gpu shows WebGL2 hardware-accelerated.
4. Enable hardware acceleration in the host browser/WebView.

Example fix

// before
const gl = this.canvas.getContext('webgl2', { antialias: true, alpha: false });
if (!gl) throw new Error('No WebGL 2 context!');

// after
function hasWebGL2() {
  try { return !!document.createElement('canvas').getContext('webgl2'); }
  catch { return false; }
}
if (!hasWebGL2()) return <FallbackMenu />;

function supportsWebGL2(): boolean {
  try { return !!document.createElement('canvas').getContext('webgl2'); }
  catch { return false; }
}
if (!supportsWebGL2()) return <FallbackMenu />;

function hasWebGL2(canvas: HTMLCanvasElement): boolean {
  return !!canvas.getContext('webgl2', { antialias: true, alpha: false });
}

When it happens

Trigger: getContext('webgl2') returns null at src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx:760-766 during init(), before discProgram is built.

Common situations: jsdom/Vitest without GL; outdated browsers (old Safari/iOS, embedded WebViews); WebGL2 on the driver blocklist; software renderers exposing only webgl1; CI without a WebGL2-capable headless browser.

Related errors

• No WebGL 2 context!
• No WebGL 2 context!
• No WebGL 2 context!
• Unable to initialize WebGL.
• Unable to initialize WebGL.

AI-assisted analysis of DavidHDev/react-bits@c7109dccb4 (2026-08-13). Data as JSON: /api/errors/e5dd359ac9dcf215. Report an issue: GitHub.