Babylon GUI - Cannot read properties of null (reading '_getComponent')

Bugs
#1

Hi,

I’m trying the Babylon GUI. I’ve been using babylonjs ^5.0.0-beta.5 and babylonjs-gui ^4.2.1. But everything errors out when I’m trying to create AdvancedDynamicTexture object:

const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI('UI');

Once I’ve loaded this I keep getting errors:

Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘_getComponent’)

Everything works just fine on the official babylonjs 4.2.1 . Is this because of beta? Or did GUI moved in 5.0 somewhere else?

#2

Hi!
Do you mix the two versions? It’s not a good idea :slight_smile:

#3

I am doing it this way so the GUI classes are in a separate namespace

import * as GUI from '@babylonjs/gui'

  private _setupGUI() {
    const guiTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI', true, this.scene)
    this.gui = guiTexture
  }

image

This works.

#4

Yeah you were right, I was using two different versions. So I migrated to latest beta for all.

However it still errors out with the same error :thinking:

image

#5

Ok I think it was because of babylonjs and it’s working with @babylonjs/core . So when I changed the imports it all works just fine:

import * as BABYLON from '@babylonjs/core';
import { Engine, Scene, ArcRotateCamera, Vector3, Mesh, MeshBuilder, DirectionalLight, ShadowGenerator, Color4 } from '@babylonjs/core';

However with @babylon/core I don’t have access to debugLayer

#6

The inspector is a devDepedency and you have to import it from a separate package.

image

import '@babylonjs/core/Debug/debugLayer'
import '@babylonjs/inspector'
1 Like
#7

Ok it looks I have to pull everything from different modules. I’ve found this @babylonjs/inspector. Then just import everything with:

import '@babylonjs/core/Debug/debugLayer';
import '@babylonjs/inspector';

And it all works fine without any errors. Now it thinks I’m using React, but I’m using Vue. However everything seems to be working fine :smile:

#8

What does it think? You mean the console logs? The inspector is made with React. I am a Vue fanboy too :smiley:

#9

image
Yeah, it’s not an error. Just funny :smile:

1 Like
#10

So problem solved?
Edit: thanks for marking as a solution

#11

One more thing here. Why do you import the whole BABYLON namespace?

#12

Yeah I thought it was a good idea at start. I got rid of that already!

1 Like