How to use BABYLON.GUI?

Hello.
I saw the code in the examples:
var panel = new BABYLON.GUI.StackPanel ();
But I get an error that there is no BABYLON.GUI.
My import (TS):
import * as BABYLON from “babylonjs”;
import * as GUI from “babylonjs-gui”;
I copied babylon using npm.
How can I use BABYLON.GUI?

You are importing is as GUI, have you tried using the GUI variable instead?

Having said that - this should actually work. But if you are just starting a new project, and using typescript, can i recommend you use the es6-modules packages? @babylonjs/core and @babylonjs/gui.

You code will be smaller, cleaner, scalable, will make better coffee and will know all of Shakespeare’s sonnets straight from the box. Well, 3 out of 5 is also something!

Thanks, it helped.
Installed additionally:
npm install @ babylonjs / core --save
And this:
import * as BABYLON from “@babylonjs”;
became enough.

Hmm, it’s not that simple. Wrote like this:
import * as BABYLON from ‘@ babylonjs / core’;
import * as GUI from ‘@ babylonjs / gui’;
I can now do this:
var panel = new GUI.StackPanel ();
But not like in the example
var panel = new BABYLON.GUI.StackPanel ();

UPD: In compiled JS it requires exactly BABYLON.GUI (GUI does not exist), but in the TS file it requires a GUI.
This is in the html file:

This is in the ts file:
import * as BABYLON from ‘babylonjs’;
import * as GUI from ‘babylonjs-gui’;

When using @babylonjs it writes some kind of compilation error, left it for later.
What am I doing wrong? Not taking Babylon.js from there?

1 Like

My first recommendation would be too not look into the compiled JavaScript :blush:

My second recommendation would be to import only what you need and use it directly. The documenting is using the BABYLON and GUI namespaces, but this is just for ease of explaining. When to import just what you need you keep your code minimal. Only what you need is bundled.

If you really want to use the Babylon namespace, then just add GUI to BABYLON yourself, but this is not needed IMO

1 Like

I came across this your post accidentally searching for something else but since recently I had been struggling with similar problem (and setup in general) I can share few thoughts.

Firstly lets consider the difference between importing from 'babylonjs' and '@babylonjs/<package>'.

Both babylonjs and babylonjs-gui are npm packages exported with support for your regular common js module syntax.

Latter @babylon/.... packages are package published with enabling es6 (es2015) modules support and esNext import() statements. It is done mainly to provide improved capability of tree shaking during build step. That is advantageous if you want to reduce your bundle size. You can find bit more info in related BabylonJS docs

You either need one or the other format. It makes no sense to import both babylonjs and from @babylonjs/core.

So how to chose?

Well… it depends on your setup. If you are using preconfigured starter that targets one or the other, unless both formats are supported, choice will be most likely forced onto you. If you are setting up dev/build environment I would advise to always go for latest stable solution. But that means you will have to (1) enable appropriate flags in your bundler and (2) test your new build config to make sure other npm packages are still building fine and all your dev tools (eg. testing tools) run as expected.

There are some packages that prove to be very resilient to modern import syntax and often will require custom transformers or configuration. In my current game project I am using Jest for testing which is a nightmare to setup correctly for esNext, thus I am stuck with babylonjs imports.

What to do if you cant use esNext?

BabylonJS is not a small package, so to improve build speed just exclude it and instead load your application with external babylonjs as a vendor package.

Hope it helps for anyone who faces similar frustration. :smiley:

Below is just copy paste from one of my Typescript source files. I am using both: components from the babylonjs package and babylon-gui.

import { useEffect } from 'react'
import { NullComponent } from '../babylon/babylon.types'
import { useScene } from '../babylon/hooks/scene'

import { Mesh, MeshBuilder, StandardMaterial, Vector3 } from 'babylonjs'
import { AdvancedDynamicTexture, Control, TextBlock, Container, MultiLine } from 'babylonjs-gui'

I spent several hours looking where my GUI is :slight_smile:
(Well, finally it was happily found).