THREE.WebGLRenderer: Context Lost (Uncaught TypeError: unhideTextInstance is not a function)

Question

I am rendering textured objects in react-three-fiber using Suspense:

<Suspense fallback={null}>
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
    <Image image={ images(`./texture.png`).default } /> // render plane with texture.png
</Suspense>

Where Image is a custom component that loads an image using useLoader and renders a plane with the image as its texture.

Normally no problems occur. But occasionally, with some combinations of images inside of Suspense, the canvas fails to render and I receive THREE.WebGLRenderer: Context Lost with the following error:

Uncaught TypeError: unhideTextInstance is not a function

I tried handling the WebGL context loss with gl.forceContextRestore(), but when the WebGL context is restored, the canvas still fails to render.

Answer 1

In this case, the TypeError is being thrown because of the comments included inside of Suspense. Remove the comments and the problem is solved:

<Suspense fallback={null}>
    <Image image={ images(`./texture.png`).default } />
    <Image image={ images(`./texture.png`).default } />
    <Image image={ images(`./texture.png`).default } />
</Suspense>