Looking for a list of ES6 Imports

Questions
1

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

4 Likes
2

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.

3

Pinging @sebavan

4

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

2 Likes
5

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

6

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

7

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.

8

Can you share your tsconfig and your webpack config?

9

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)

10

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

11

Auto-Import of new classes does work for me -

image
image902×283 28.3 KB

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

2 Likes
12

@RaananW I have a similar problem and cant get my head arround it. VS-Code does give me Import options but its always from “@babylonjs/core”
It should display “@babylonjs/core/Animations/easing”

image
image1005×308 31.1 KB

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "strict": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"]
    },
  },
  "include": ["src"],
  "types": [
    "babylonjs",
    "babylonjs-loaders",
    "babylonjs-gui"
  ]
}

package.json

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babylonjs/core": "^6.18.0",
    "@babylonjs/gui": "^6.21.0",
    "@babylonjs/inspector": "^6.21.0",
    "axios": "^1.5.0",
    "jszip": "^3.10.1",
    "jszip-utils": "^0.1.0",
    "vite-plugin-dts": "^3.5.3"
  },
  "devDependencies": {
    "@types/node": "^20.6.2",
    "rollup-plugin-visualizer": "^5.9.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
13

Try this - write down the name of the class you want to import and click on this light-bulb thingy . does it show you the right path?

14

Yes, you are right the light-bulb does provide the detailed import path:

image
image1465×628 48.6 KB

Just weird that VS-Code doesnt show it when I type it. Any Idea how I can fix this?

image
image733×179 9.58 KB

15

So what is the solution when VSCode gets the wrong path?

Today I was messing with Tools.ToRadians, which weirdly VSCode kept getting this wrong and doing
import { Tools } from “@babylonjs/inspector/tools”;
which is incorrect. It should be
import { Tools } from “@babylonjs/core/Misc/tools”;

Any idea why that would happen?

I would love to see a full list of ALL imports, I would think it would be helpful

1 Like
16

i’ll be honest and say - I couldn’t find a simple fix for that :slight_smile: But it might be pure laziness!..

What I do is - write the class’s name, press enter, undo (to remove the auto-import) and then press the light-button to import correctly… Another way I like to work is to work only with @babylonjs/core and afterwards delete all of the imports, and use the vscode importer one class after the other. I know it’s not optimal, but it is still faster than writing everything manually :slight_smile:

2 Likes