Uncaught TypeError: Cannot read properties of undefined (reading 'GUI')

Questions
1

Hi Gurus!

I am using new engine in local es6 tree-shaking environment.
The app is a local equivalent to playground example

When I read GUI from a snippet server:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture"
...
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#J04Z3N");
...

I receive an error:

instantiationTools.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'GUI')
    at Function.InstantiationTools.Instantiate (instantiationTools.js:32)
    at Function.Tools.Instantiate (tools.js:160)
    at Function.Control.Parse (control.js:2026)
    at Container._parseFromContent (container.js:511)
    at Function.Control.Parse (control.js:2029)
    at AdvancedDynamicTexture.parseContent (advancedDynamicTexture.js:986)
    at XMLHttpRequest.eval (advancedDynamicTexture.js:1013)

If I comment the line:
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#J04Z3N");
then scene is successfully rendered.

Package.json:

"dependencies": {
    "@babylonjs/core": "^5.0.0-alpha.60",
    "@babylonjs/gui": "^5.0.0-alpha.60",
    "@babylonjs/inspector": "^5.0.0-alpha.60",
    "@babylonjs/loaders": "^5.0.0-alpha.60",
    "@babylonjs/materials": "^5.0.0-alpha.60",
    "@babylonjs/post-processes": "^5.0.0-alpha.60",
    "@babylonjs/procedural-textures": "^5.0.0-alpha.60",
    "@babylonjs/serializers": "^5.0.0-alpha.60"
  }

Please share your ideas where to check?

Regards,
Roman

2

Hello!
If you follow this tutorial (starts when @msDestiny14 is adding the code you are interested in) and you still get an error you should report it as bug :slight_smile:

1 Like
3

Does loading the entire GUI solve the issue?
i.e. load the ADT this way:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D"

When parsing we still don’t know what controls you are going to use, and they are not loaded into the module. You should either import the entire 2D context (like I suggest) or make sure to side-effect-import all controls you are using. I think option a is more convenient :slight_smile:

3 Likes
4

This is working for me (alpha.60):

import { AdvancedDynamicTexture } from '@babylonjs/gui' 
const gui = AdvancedDynamicTexture.CreateFullscreenUI('gui', true, scene)
void gui.parseFromSnippetAsync('1F2VJQ')
3 Likes
5

@roland, @RaananW Thank’s a lot. Your’s solutions work.

2 Likes