React Three.js: "Error creating WebGL context" even though WebGL works on https://get.webgl.org/

I'm developing a hero section for my React portfolio that includes a 3D model rendered with Three.js via @react-three/fiber. However, when the component loads, I see this error in the browser console:

ErrorBoundary caught an error: Error creating WebGL context.

To verify if this was a browser or GPU issue, I tested WebGL support on https://get.webgl.org/ — and it worked fine. So, WebGL is supported and functional, but my Three.js scene still fails to initialize.

Link to test in web: https://stackblitz.com/edit/vitejs-vite-hdwgdgwy?file=src%2FApp.jsx

Why would WebGL work on the test site but fail to initialize in a React/Three.js app? What are common causes of the "Error creating WebGL context" error in a React setup using @react-three/fiber?

Steps to Reproduce:

1. Create the following React component:

// ComputersCanvas.jsx
import { useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

const Computers = ({ isMobile }) => {
  const { scene } = useGLTF("./desktop_pc/scene.gltf");

  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor="black" />
      <primitive
        object={scene}
        scale={isMobile? 0.7: 0.75}
        position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
      />
    </mesh>
  );
};

const ComputersCanvas = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 500px)");
    setIsMobile(mediaQuery.matches);
    const handleMediaQueryChange = (event) => setIsMobile(event.matches);
    mediaQuery.addEventListener("change", handleMediaQueryChange);
    return () => mediaQuery.removeEventListener("change", handleMediaQueryChange);
  }, []);

  return (
    <Canvas
      frameloop="demand"
      dpr={[1, 1.5]}
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <OrbitControls
        enableZoom={false}
        maxPolarAngle={Math.PI / 2}
        minPolarAngle={Math.PI / 2}
      />
      <Computers isMobile={isMobile} />
      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas;

2. Render it in your App.jsx:

import React from "react";
import ComputersCanvas from "./components/ComputersCanvas";

function App() {
  return (
    <div style={{ width: "100vw", height: "100vh", background: "#0a0a0a" }}>
      <h1 style={{ color: "#fff", textAlign: "center", paddingTop: "20px" }}>
        3D Portfolio Demo
      </h1>
      <div style={{ width: "100%", height: "90vh" }}>
        <ComputersCanvas />
      </div>
    </div>
  );
}

export default App;

3. Install dependencies:

npm install three @react-three/fiber @react-three/drei

What I tried:

• Verified WebGL support at https://get.webgl.org/ – works fine.
• Confirmed model path /public/desktop_pc/scene.gltf exists.
• Tried removing frameloop='demand' and preserveDrawingBuffer, same issue.
• The error occurs before the scene even loads.

Environment

• OS: Windows 10
• Browser: Chrome 141
• React: 18.3.1
• @react-three/drei: 9.105.0
• three: 0.168.0

Additional Info

• get.webgl.org confirms WebGL runs fine in this environment.
• The error happens immediately after rendering .
• No network errors are logged — the .gltf model file exists in /public/desktop_pc/scene.gltf.