Looking for a list of ES6 Imports

Hello,
I just started using Babylon, and I’m having a lot of fun with it. One thing I’ve struggled with is finding the proper import lines for ES6 support. Obviously they are different than most of the tutorials and playground examples out there.

These ones are in the ES6 documentation:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { GridMaterial } from "@babylonjs/materials/grid";

But it caused quite a bit of frustration to figure out these ones for SceneLoader, AssetsManager, and Texture:

import { SceneLoader } from "@babylonjs/core/Loading";
import { AssetsManager } from "@babylonjs/core/Misc";
import { Texture } from "@babylonjs/core/Materials";

Then there are some non ES6 imports mixed in as well

import "@babylonjs/loaders/glTF"
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/core/Meshes/meshBuilder";

I also had issues when I accidentally tried to import a ‘downstream’ module, but the dev tools helped me find the proper thing to import. So in summary, each time I’ve needed to import something new it’s been a bit of a struggle and I feel like I’m missing something.

Is there one location where I can find all of the modules, and what the correct import statement would be for each?

Thanks for reading
Nick

3 Likes

Hi, @Nick_Nothom

For now I have cloned babylonjs git and check paths there. :slight_smile:

But yes for me auto import on WebStorm is broken as well (haven’t tried VSCode), it imports from root or even if path is correct it removes @ sign from it so right now need to adapt or type manually all paths.
(as good could be my project setup, will try to dig into it)
Hope will find out what causing it, as it makes work with es6 very unpleasant.

Pinging @sebavan

Maybe we could try to generate a search like functionality in the doc ???

1 Like

FWIW, what I’ve been doing is just searching for the class in the node_modules/@babylonsjs directory in VS Code … it “works” but it’s a bit tedious and frustrating.

I just finished class (I’m teaching a 3D UI class with Babylon, and have the projects set up for ES6), and the students are asking this question, because its less obvious and more frustrating for them (you know, I’m old, “I had to walk the code tree both directions in bare feet in Winter to find declarations when I was a kid”).

I’d love to see a solution. One integrated into VS Code would be ideal (you start typing the Class and it tells you where it’s defined; I tried a couple of the ES6 importer extensions and couldn’t get them working?). But, even if it’s just in the API docs (putting the “ES6 import” into the class docs for every class would solve this too).

Maybe @sebavan can comment but in my VScode setup I can see where the class are imported using the tiny light bulb icon on the left

Do you have an extension that looks for the imports? Or is there some setting I need? One of the students said it completed for him, but not reliably and he wasn’t sure why.

Can you share your tsconfig and your webpack config?

sure. I’m following @RaananW’s sample project, so it’s similar I think. It doesn’t work for me in his project either.

Archive.zip (1.9 KB)

maybe @RaananW knows why VScode is not offering module completion automatically?

Auto-Import of new classes does work for me -

Can you share an entire project where it doesn’t work?

2 Likes