# Magento 2.x and Babylon 3+ problem

**URL:** <https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643>\
**Category:** Questions\
**Created:** [April 17, 2019, 1:24pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643 "2019-04-17T13:24:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 17, 2019, 1:24pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/1 "2019-04-17T13:24:52Z")

</div>

I used to have Babylon ver2.5 working perfectly well with Magento 2.1. Here is a sample of the commands I used to initialise Babylon

require([‘jquery’,‘handjs’,‘cannon’,‘babylon’, ‘Emthemes\_FlyingEffectCart/js/catalog-add-to-cart’],function(){ runBabylon();  
});

var runBabylon = function($)  
{ // some PHP code  
var canvas = document.getElementById(“renderCanvas”);  
var engine = new BABYLON.Engine(canvas, true);  
//rest of code  
}  
After installing Babylon 3.3 I get the error  
ReferenceError: BABYLON is not defined  
I am perfectly sure there is not problem on the Magento side. I suspect the problem lies with universalModuleDefinition but I might be wrong. I also suspect Typescript compilation of Babylon.  
I remember in the good old days with plain JS Babylon was initialized using  
var BABYLON;  
(function (BABYLON) { …}  
Has anybody used the latest version with Magento?  
BTW there seems to be a problem downloading Babylon from github (either zip or using Smartgit)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 17, 2019, 5:01pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/2 "2019-04-17T17:01:04Z")

</div>

Hey Jacob, wanna try Babylon.js v4.0? we have this doc for all module related questions:  
[https://doc.babylonjs.com/features/es6\_support](https://doc.babylonjs.com/features/es6_support)

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 18, 2019, 11:56am UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/3 "2019-04-18T11:56:51Z")

</div>

Same issue with v4.0 @Delkatosh. The issue seems to be related to conflict between requirejs & Webpack bundling. Can I find babylon.js core (and Cannon) in raw JS without Webpack anywhere?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 18, 2019, 3:46pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/4 "2019-04-18T15:46:31Z")

</div>

Well we compile raw JS from TS using TS + webpack but babylon.js on our preview CDN should work directly

pinging @sebavan as he may have more ideas regarding this conflict

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 18, 2019, 3:55pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/5 "2019-04-18T15:55:17Z")

</div>

Babylon is a UMD module so it is compatible with require but I guess the require dependency should be named as you can see on this thread :

> [@Trouble starting the inspector](https://forum.babylonjs.com/t/trouble-starting-the-inspector/2290):
>
> Hello everyone. I’m having trouble starting the inspector in my project. I’m getting the following message in the console when calling scene.debugLayer.show() debugLayer.ts:168 Uncaught TypeError: Cannot read property 'Inspector' of undefined at DebugLayer../Debug/debugLayer.ts.DebugLayer.\_createInspector (debugLayer.ts:168) at debugLayer.ts:228 at HTMLScriptElement.script.onload (tools.ts:1014) I’m using v4.0.0-beta.3 currently. I must say I’m using requirejs in this project and i…

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 19, 2019, 12:24pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/6 "2019-04-19T12:24:23Z")

</div>

OK, I moved one step forward. Using BJS 3.3 from CDN I traced that the code is entering  
else if(typeof define === ‘function’ && define.amd) {…}

If I replace  
define(“babylonjs”, amdDependencies, factory)  
with  
root[“BABYLON”] = factory(CANNON,OIMO,earcut);  
BABYLON initializes successfully but doesn’t load eg: Cannon

So how can I return root[“BABYLON”] and it’s amdDependencies ?

@sebavan @Delkatosh

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 19, 2019, 12:54pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/7 "2019-04-19T12:54:21Z")

</div>

You should try with 4.0 as he header is now a proper Webpack one and 3.3 is known to have such kind of issues.

About the dependencies, you can inject them when needed, they have been removed from the dependency list to better decoupled the frameworks.

And if you do not rely on physics for instance you won t need oimo and even if you do, you would not need both OIMO and Cannon.

So to load them, either you would need to require them in a global name or you could pass them to the physicsEngine when you create the plugin in the constructor.

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 19, 2019, 1:50pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/8 "2019-04-19T13:50:16Z")

</div>

With version 4, I still need to return root[“BABYLON”] in define.amd

> else if(typeof define === ‘function’ && define.amd)  
> //define(“babylonjs”, , factory);  
> root[“BABYLON”] = factory();

But Cannon loads well. So I guess I need to minify Babylon with this change.  
BTW has cannon Physics code been incorporated AS IS from [www.cannonjs.org](http://www.cannonjs.org) or has it been modified by the BABYLON team?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 19, 2019, 2:33pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/9 "2019-04-19T14:33:11Z")

</div>

I do not understand why you need this change,

Could you try instead of require([‘jquery’,‘handjs’,‘cannon’,‘babylon’, ‘Emthemes\_FlyingEffectCart/js/catalog-add-to-cart’],function(){ runBabylon();  
});

to use require([‘jquery’,‘handjs’,‘cannon’,‘babylon’, ‘Emthemes\_FlyingEffectCart/js/catalog-add-to-cart’],function($, hands, CANNON, BABYLON) { runBabylon(BABYLON);  
});

basically the function should see the required amd modules in arguments ?

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 20, 2019, 7:53am UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/10 "2019-04-20T07:53:49Z")

</div>

Thanks for the continued help. I tried what you recommended (a million times ). I get the following error  
BABYLON.Engine is not a constructor

Here is my requirejs-config.js if it can be of any help  
var config = {  
map: {  
‘\*’: {  
“handjs”: “Emthemes\_Ardzan/js/hand.min.1.3.8”,  
“cannon”: “Emthemes\_Ardzan/js/cannon”,  
“babylon”: “Emthemes\_Ardzan/js/babylon”  
}  
}  
};

According to this post define in the AMD declaration is causing a conflict

> **[Error require 3.2.0-alphaA](http://www.html5gamedevs.com/topic/36000-error-require-320-alphaa/)**
>
> I received error when trying require babylon.js v3.2-alphaA. That normal in bjs previous (v3.2-alpha7). Log: Uncaught Error: Module name babylonjs has not been loaded yet for context: \_. Use require(\[\]) http://requirejs.org/docs/errors.html#notloaded...

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 20, 2019, 1:46pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/11 "2019-04-20T13:46:45Z")

</div>

I guess it is because you use babylon instead of babylonjs in your require dependencies.

As you can try with this sample, it all works as expected:

```auto
function runBabylon(OIMO, BABYLON) {
    // Get the canvas
    const canvas = document.getElementById("renderCanvas");

    // This creates a basic Babylon Engine
    var engine = new BABYLON.Engine(canvas);

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 2;

    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    scene.enablePhysics(new BABYLON.Vector3(0, -9, 0), new BABYLON.OimoJSPlugin(undefined, OIMO));

    sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9 }, scene);
    ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);

    engine.runRenderLoop(() => {
        scene.render();
    });
}

//The requirejs config
requirejs.config({
    baseUrl: '.',
    paths: {
        babylonjs: 'https://preview.babylonjs.com/babylon.max',
        oimo: 'https://preview.babylonjs.com/oimo',
        pep: 'https://code.jquery.com/pep/0.4.3/pep'
    },
    shim : {
        babylonjs: {deps: ['pep']}
    }
});

require(['pep', 'oimo', 'babylonjs'], function(_, OIMO, BABYLON) { 
    runBabylon(OIMO, BABYLON); 
});

```

replacing babylonjs by babylon fails cause using the defined name is important here.

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [April 20, 2019, 1:56pm UTC](https://forum.babylonjs.com/t/magento-2-x-and-babylon-3-problem/2643/12 "2019-04-20T13:56:57Z")

</div>

I have tried that as well. In Magento but to no avaiL. “babylonjs” is just a naming convention. Your reqirejs.config is not applicable in Magento as it gives security errors. Thirdly, in Magento we don’t need to pass anything in function `function(_, OIMO, BABYLON) {`  
but only ($) for jquery.

Anyhow, I removed ‘babylonjs’ in define(“babylonjs”, [], factory) and it’s working PERFECT.