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
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…

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?