Problem loading Babylon modules in Magento 2

Questions
1

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
https://preview.babylonjs.com/gui/babylon.min.js
https://preview.babylonjs.com/gui/babylon.gui.js

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
require([‘jquery’,‘babylonjs’,‘babylonjs-gui’],function($){
}

I suspect the problem is with Webpack bundling…

2

I feel they should be in one array

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

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)

4

@RaananW might be able to help here

5

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?

6

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’)

7

That actually looks correct.

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

8

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

9

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”, }

2 Likes