GUI error - Vector2 is not a constructor

Questions
1

When trying to use the babylon.js GUI I’m getting this error:

TypeError: babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__.Vector2 is not a constructor
    at ../../../dev/gui/src/2D/measure.ts (measure.ts:4:1)
    at __webpack_require__ (bootstrap:19:1)
    ...

I’m using Viewer and GUI (downloaded for speed, but both are the CDN versions):

<script src="../res/babylon.viewer.js"></script>
<script src="../res/babylon.gui.js"></script>

I then go on to use it like this:

const ui = BabylonViewer.BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('ui');

getting this error (and removing BabylonViewer. doesn’t change anything seemingly - both console.log(BabylonViewer.BABYLON.GUI) and console.log(BABYLON.GUI) return null, console.log(BabylonViewer) returns correctly):

TypeError: Cannot read properties of undefined (reading 'AdvancedDynamicTexture')

but I assume that’s simply because the GUI code is failing before that!

Any idea what the issue could be? I assume the GUI works with the Viewer right? But as far as I can tell it needs to be imported separately like this?

Thanks!

2

I would slowly recommend you to either use the es6 version of the viewer to add further classes to it or just use the full UMD version of babylon isntead of the viewer.
This class is simply not included in the viewer package, because it is not needed for the basic functionality of the viewer.

1 Like
3

@RaananW you convinced me! After multiple hours getting webpack working I’ve now switched to the es6 version of BJS as you suggest :sweat_smile:

  • Does the Viewer (using tags in the HTML etc.) require everything in BabylonViewer? Or as I’m now using ES6 can I import less stuff than import * as BabylonViewer from 'babylonjs-viewer'? Or, alternatively, would I be better off (in terms of size) just importing elements from the core BJS instead? (also I see 'babylon-viewer' is a different format of npm package than all the other '@babylon' packages, I assume it’s correct though…)

Thank you!

EDIT: Solved the error I was getting, so only that one question now!

1 Like
4

the es6 version of the viewer is at @babylonjs/viewer, and it does not include the babylon dependency directly, which lets you mix and choose as you please. You don’t have to import everything, just what you need. Your build system in turn, will decide for you what is included in the package and what isn’t. This way you achieve best package size and everything you need from the entire framework :slight_smile:

1 Like
5

Oh - might the documentation need updating then? On the es6 support page the viewer isn’t mentioned (only the inspector is) and on the Viewer page it says to use babylonjs-viewer with npm/es6.

And (last question - for a while at least - I promise :wink: ), if as you say @babylonjs/viewer doesn’t directly include babylon, why does this work?

import * as BabylonViewer from '@babylonjs/viewer';
let n = new BabylonViewer.BABYLON.TransformNode(marker.name, scene);

Doesn’t that suggest it is automatically including all of BABYLON?

6

Sorry, i should have been more clear :slight_smile:

The Babylon viewer es6 package does not pack babylon.js core, like the UMD version does. it is not a 3MB file with everything needed. It is just the babylon viewer files, with a dependency on @babylonjs/core. When you install the package, you also install @babylonjs/core, and when you bundle it, it all works as it should - it loads all of the dependencies, bundle them together, and - you have your package. But now, if you reference babylon’s other types (like your very much needed vector2), it will be included in this package as well. Just like the AdvancedDynamicTexture and others.

1 Like