Babylon GUI in Next.js - Engine Invalid: can not create canvas

[Bernard_Stein]

I am trying to implement the Colyseus Babylon example: GitHub - colyseus/tutorial-babylonjs-client: Client-side code for Tutorial: Real-time Multiplayer with BabylonJS and Colyseus in a Next.js 13 app directory project. I adapted the Babylon Next starter: GitHub - ecoinomist/babylon-next: Babylon + Next.js Production Setup - Minimum Starter Template and am able to get a basic scene but when trying to add the Babylon.js GUI it gives an error of Engine Invalid: can not create canvas. I’ve attached the relative files. I’m hoping brianzinn sees this and can help.

[jeremy-coleman]

Ur accessing the canvas before its actually created - remember ur inside a react component. Move the canvas creation to willMount or just create it outside of react and use a ref object. Also, You probably dont want to be creating engine as an effect of rendering the menu.