DavidHDev/react-bits · critical · Error

No WebGL 2 context!

Error message

No WebGL 2 context!

What it means

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.

Source

Thrown at src/tailwind/Components/InfiniteMenu/InfiniteMenu.jsx:636

  }

  run(time = 0) {
    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));
  }

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

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

    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'),
      uViewMatrix: gl.getUniformLocation(this.discProgram, 'uViewMatrix'),

View on GitHub (pinned to c7109dccb4)

Solutions

1. Run a getContext('webgl2') probe before mounting InfiniteMenu and fall back to a non-WebGL menu.
2. For CI/headless use a WebGL2-capable software path (e.g. headless Chrome with SwiftShader WebGL2, or angle) instead of jsdom.
3. Check chrome://gpu / about:support; update drivers or browser if WebGL2 is listed as unavailable.
4. If embedding in a WebView, enable hardware acceleration and a WebGL2-capable renderer.

Example fix

// before
const menu = new InfiniteMenu({ canvas });

// after
function hasWebGL2() {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
}
const menu = hasWebGL2() ? new InfiniteMenu({ canvas }) : createFallbackMenu(canvas);

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

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

When it happens

Trigger: 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.

Common situations: 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.

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/5cbcbb20aba0ae0f. Report an issue: GitHub.