# Looking for a list of ES6 Imports

**URL:** <https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002>\
**Category:** Questions\
**Created:** [June 20, 2019, 1:52am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002 "2019-06-20T01:52:51Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nick\_Nothom](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nick_nothom/32/3061_2.png) [@Nick\_Nothom](https://forum.babylonjs.com/u/Nick_Nothom)\
**Post date:** [June 20, 2019, 1:52am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/1 "2019-06-20T01:52:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Hersir](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hersir/32/108_2.png) [@Hersir](https://forum.babylonjs.com/u/Hersir)\
**Post date:** [June 20, 2019, 6:00am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/2 "2019-06-20T06:00:13Z")

</div>

Hi, @Nick_Nothom

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

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.

---

<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:** [June 20, 2019, 3:05pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/3 "2019-06-20T15:05:08Z")

</div>

Pinging @sebavan

---

<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:** [June 20, 2019, 8:51pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/4 "2019-06-20T20:51:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![blairmacintyre](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blairmacintyre/32/6398_2.png) [@blairmacintyre](https://forum.babylonjs.com/u/blairmacintyre)\
**Post date:** [August 26, 2020, 5:58pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/5 "2020-08-26T17:58:52Z")

</div>

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

---

<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:** [August 26, 2020, 6:05pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/6 "2020-08-26T18:05:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![blairmacintyre](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blairmacintyre/32/6398_2.png) [@blairmacintyre](https://forum.babylonjs.com/u/blairmacintyre)\
**Post date:** [August 26, 2020, 6:33pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/7 "2020-08-26T18:33:05Z")

</div>

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.

---

<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:** [August 26, 2020, 6:44pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/8 "2020-08-26T18:44:51Z")

</div>

Can you share your tsconfig and your webpack config?

---

<div class="post-metadata">

**Author:** ![blairmacintyre](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blairmacintyre/32/6398_2.png) [@blairmacintyre](https://forum.babylonjs.com/u/blairmacintyre)\
**Post date:** [August 26, 2020, 6:59pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/9 "2020-08-26T18:59:25Z")

</div>

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](https://forum.babylonjs.com/uploads/short-url/bIRnT8hWXL1UR8NNGNpJXzbRxzy.zip) (1.9 KB)

---

<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:** [August 26, 2020, 8:31pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/10 "2020-08-26T20:31:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 27, 2020, 10:10am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/11 "2020-08-27T10:10:24Z")

</div>

Auto-Import of new classes does work for me -

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7e7ac0b4fd26716fe1de438711e04e4185bfb04b.png)

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

---

<div class="post-metadata">

**Author:** ![Simon\_Weck](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon_weck/32/12037_2.png) [@Simon\_Weck](https://forum.babylonjs.com/u/Simon_Weck)\
**Post date:** [September 22, 2023, 2:32pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/12 "2023-09-22T14:32:02Z")

</div>

@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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/d/4d577f12d4afe9231f40dff42a603ad6e70880f9.png)

This is my tsconfig.json

```auto
{
  "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

```auto
"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"
  }

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 22, 2023, 3:27pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/13 "2023-09-22T15:27:34Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Simon\_Weck](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon_weck/32/12037_2.png) [@Simon\_Weck](https://forum.babylonjs.com/u/Simon_Weck)\
**Post date:** [September 23, 2023, 11:29am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/14 "2023-09-23T11:29:08Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/1/31a945af310c888676bd80451f2d06a67baf0444.png)

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/9/f92638195c2804a1bc2b765d79a09a7577d4452d.png)

---

<div class="post-metadata">

**Author:** ![MyFault](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/myfault/32/695_2.png) [@MyFault](https://forum.babylonjs.com/u/MyFault)\
**Post date:** [September 24, 2023, 10:13pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/15 "2023-09-24T22:13:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 25, 2023, 11:10am UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/16 "2023-09-25T11:10:53Z")

</div>

i’ll be honest and say - I couldn’t find a simple fix for that 🙂 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 🙂

---

<div class="post-metadata">

**Author:** ![Khanon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/khanon/32/14980_2.png) [@Khanon](https://forum.babylonjs.com/u/Khanon)\
**Post date:** [July 16, 2025, 6:22pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/17 "2025-07-16T18:22:56Z")

</div>

Hi,

Coming back to this question, some years have passed since then lol

Did somebody find a solution to avoid this workaround of light-button? (_Quick fix_ nowadays)

My IDE just shows the root path:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/4/d4f9c6089702f5a82ff04316aa07bc875f81cf8e.png)

---

<div class="post-metadata">

**Author:** ![SimoneDev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simonedev/32/44252_2.png) [@SimoneDev](https://forum.babylonjs.com/u/SimoneDev)\
**Post date:** [July 16, 2025, 7:10pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/18 "2025-07-16T19:10:37Z")

</div>

If I remember correctly, in another thread I read that the suggestion fails if, in the project, there is at least one import from the entire module (`@babylonjs/core`).

Anyway, in VSCode, another approach might be to temporarily import from the entire module, e.g.:

`import { Vector3 } from "@babylonjs/core";`

Then press `⌘` (or `Ctrl` on Windows) on the class to go to the correct import location. After that, you can swap it with the more specific import, e.g.:

`import { Vector3 } from "@babylonjs/core/Maths/math.vector";`

---

<div class="post-metadata">

**Author:** ![Khanon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/khanon/32/14980_2.png) [@Khanon](https://forum.babylonjs.com/u/Khanon)\
**Post date:** [July 16, 2025, 9:17pm UTC](https://forum.babylonjs.com/t/looking-for-a-list-of-es6-imports/4002/19 "2025-07-16T21:17:45Z")

</div>

> If I remember correctly, in another thread I read that the suggestion fails if, in the project, there is at least one import from the entire module (`@babylonjs/core` ).

I removed “@babylonjs/core” from all files in the project.

After adding the full path in other files, the first suggestion keeps being “@babylonjs/core”, but the second one is the full path (although it is not shown in the suggestion).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/4/34d0de6446792825cad000eaf74ef12ca89c9791.png)