THREE.WebGLRenderer: Context Lost error when using useTexture hook.

[Arsh1a]

Problem description:

When I try to load a texture on a mesh using useTexture hook, I get THREE.WebGLRenderer: Context Lost. error in console.

Relevant code:

const Sphere = () => {
  const textures = useTexture({
    map: "./texture.jpg",
  });
  const mesh = useRef();
  return (
    <mesh
      ref={mesh}
      scale={1}
    >
      <sphereGeometry attach="geometry" args={[2, 64, 64]} />
      <meshStandardMaterial {...textures} color="red" />
    </mesh>
  );
};

<Canvas>
  <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
  <ambientLight />
  <Sphere />
</Canvas>

[drcmda]

do you have a repro? codesandbox preferred. useTexture is fairly common, i've updated this to latest: https://codesandbox.io/s/object-clump-ssbdsw?file=/src/App.js:1179-1222 and it seems to work, although it looks like three has deprecated something but it's still running

ps "./texture.jpg", i always find it suspect when i see a relative path describing an asset that's supposed to be absolute, and in the /public folder at the root "/texture.jpg"

pps object useTexture seems to be ok as well https://codesandbox.io/s/market-poc-0kf86?file=/src/App.js:1137-1673

[Arsh1a]

So I tried the same code in codesandbox and still getting the same error, but with a new comment which I did not get this comment while doing this on my own:

ForwardRef(Canvas) suspended while rendering, but no fallback UI was specified.

Wrapping suspense around canvas seems to fix it.

https://codesandbox.io/s/kind-jones-u2my0p?file=/src/App.js