Problem loading Babylon modules in Magento 2

I have a problem (again) when adding Babylon modules in Magento whether it’s GUI library or GLTFLoader. Babylon itself loads fine.
For example when I get the error message
"Uncaught TypeError: Cannot read properties of null (reading ‘_getComponent’)"
at this point
var adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(‘UI’);

I’m using Babylon version 5.11 but the problem occurs with Babylon 4.1.2 as well. I copied the Babylon files from

Magento uses requirejs to load javascript files and uses AMD technology. That’s why it reads this part of the code upon reading the babylon.gui.js files

else if(typeof define === ‘function’ && define.amd)
define(“babylonjs-gui”, [“babylonjs”], factory);

Here is my requirejs-config.js settings in Magento
var config = {
paths: {
“babylonjs”: “Threedwebco_Stardust/js/babylon”,
“babylonjs-gui”: “Threedwebco_Stardust/js/babylon.gui”

And here is how I access the files in my phtml file

I suspect the problem is with Webpack bundling…

I feel they should be in one array

define([“babylonjs-gui”, “babylonjs”], factory);

Thanks for the reply. After making your suggested change I get this error

babylon.gui.js:16018 Uncaught TypeError: Cannot read properties of undefined (reading ‘Vector2’)
at …/…/…/lts/gui/dist/2D/measure.js (babylon.gui.js:16018:72)
at webpack_require (babylon.gui.js:26669:41)
at …/…/…/lts/gui/dist/2D/controls/control.js (babylon.gui.js:4325:66)
at webpack_require (babylon.gui.js:26669:41)
at …/…/…/lts/gui/dist/2D/controls/container.js (babylon.gui.js:3730:66)
at webpack_require (babylon.gui.js:26669:41)
at …/…/…/lts/gui/dist/2D/controls/rectangle.js (babylon.gui.js:10823:68)
at webpack_require (babylon.gui.js:26669:41)
at …/…/…/lts/gui/dist/2D/controls/button.js (babylon.gui.js:1783:68)
at webpack_require (babylon.gui.js:26669:41)

@RaananW might be able to help here

Nope, this is the right syntax:

RequireJS API

We define a module name, then define its dependencies, and then run the require function with the first variable in the factory function to be the dependency (i.e. BABYLON).

I wonder - what would happen if you actually define the variables like this:

require([‘jquery’,‘babylonjs’,‘babylonjs-gui’],function($, BJS, BJSGUI){

what would be the values for BJS and BJSGUI?

If I run console.log(BJS) , it returns the following

  1. Module {…}

    AbstractActionManager: (…)
    AbstractAssetTask: (…)
    AbstractMesh: (…)
    AbstractScene: (…)
    AcquireNativeObjectAsync: (…)
    Action: (…)
    ActionEvent: (…)
    and all the rest of functions

The same with console.log(BJS)

AbstractButton3D: (…)
AdvancedDynamicTexture: (…)
AdvancedDynamicTextureInstrumentation: (…)
BaseSlider: (…)
Button: (…)
Button3D: (…)

I still get the same error "Uncaught TypeError: Cannot read properties of null (reading ‘_getComponent’)"

If I use require([‘jquery’,‘babylonjs’,‘babylonjs-gui’],function($, BABYLON, BJSGUI){

I get the following error
Uncaught TypeError: Cannot read properties of undefined (reading ‘AdvancedDynamicTexture’)

That actually looks correct.

Have you created a scene? are you sure you are initializing babylon correctly?

Hello @Jacob just checking in if you would like any more help :slight_smile:

OK I found out that when mapping the javascript libraries in Magento, I have to use the same name that the Babylon library exports, otherwise it won’t work

eg: in Babylon

define(“babylonjs-loaders”, [“babylonjs”], factory);

in Magento

paths: {“babylonjs-loaders”: “Threedwebco_Stardust/js/babylonjs.loaders”, }

1 Like