npm repo: included extensions do not work when BABYLON is imported

The npm repo for babylonjs includes all the extensions from babylonjs/dist however, none of these work out of the box.

recreate

npm install --save babylonjs

in the file where the babylonjs scene will be created in:

import * as BABYLON from 'babylonjs

Now all of core BABYLON is available.

The folder structure of babylonjs after npm installing

Problem

Attempting to use an extesnion such as GUI or the textures the typings file throws a Property 'GUI' does not exist on typeof BABYLON because these types are not defined in the babylon.module.d.ts file. This type error is fatal and causes the node app to crash.

solution: add all these default extensions to the type definitions file, since they are included by default in the npm repo.

Problem 2

The type definition file babylon.gui.d.ts for the GUI extension seems incorrect to me. it declares the top level module as so declare module BABYLON.GUI {} which is the same as nesting modules declare module BABYLON { module GUI {} }, it does not seem to inherit anything from the main BABYLON module. The image below is taken from the typescript docs and states that modules aren’t merge-able which supports this thought.

This leads to some issues because every property reference to the BABYLON module inside babylon.gui.d.ts is undefined since there is no inheritance. I believe consolidating the two type definition files would fix this.

The workaround I’m using now involves disabling types for babylon, and editing the source code which will get overwritten after every npm install. This is far from ideal.

If this is a valid bug/feature I will be happy to make a pull request and help implement it, if it is an oversight on my part I would love some guidance on how to properly incorporate these extensions.

I posted a question on Stackoverflow, however, after research I believe this is more of a bug or feature request.

I also posted on html5gamedevs and spoke with Deltakosh who seemed happy to help as well.

[RaananW]

So, good people, it is time for a (very happy) update.

Starting with babylonjs 3.1.0-alpha3.4 (and all of its modules) you can do the following:

import * as BABYLON from "babylonjs";
import * as GUI from "babylonjs-gui";
import "babylonjs-materials";

console.log(BABYLON, GUI, BABYLON.SkyMaterial);

Don’t forget to add babylonjs (and the modules you are loading) to the types part of tsconfig.json:

"types": [
            "babylonjs",
            "babylonjs-gui",
            "babylonjs-materials"
        ]

submodules available are listed here: https://www.npmjs.com/~babylonjs

Issue tested and closed. 🎆

[deltakosh]

I came to the same conclusion. @raananw will work on this restructuring