Changing to ES6 modules

Questions
1

Hi everyone,

I’m trying to use the newer ES6 modules and import only what I need in my ts files but I get an error that I don’t understand.
I used to import everything in the following way:
import * as BABYLON from 'babylonjs';

So I try to change this to only the things I need like so:
import { Vector3 } from "@babylonjs/core/Maths/math.vector";

And I get the followng error:
Error: require() of ES Module C:\Users\emiel.…\Game\Server\node_modules@babylonjs\core\Maths\math.vector.js from C:\Users\emiel.…\Game\Server\src\rooms\schema\RaiderRoomState.ts not supported.
Instead change the require of math.vector.js in C:\Users\emiel.…\Game\Server\src\rooms\schema\RaiderRoomState.ts to a dynamic import() which is available in all CommonJS modules.

As I’m not using required() anywhere in my code, I figure Babylon does it on its own? But I can’t find the reason why, or how to fix this.
I’ve tried changing the import to
import("@babylonjs/core/Maths/math.vector");
But the error persists…

Any tips or guidance is welcom.
FYI total noob here, so try to ELI5? Any documentation is also appreciated!

Thanks,

Emiel

2

I think we will need to see what’s in your package.json file in relation to Babylon.

1 Like
3

Hi!

Thanks for responding.

{
  "name": "server",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist/my-element.es.js",
  "exports": {
    ".": "./dist/my-element.es.js"
  },
  "types": "types/my-element.d.ts",
  "files": [
    "dist",
    "types"
  ],
  "scripts": {
    "start": "ts-node-dev --respawn --transpile-only src/index.ts",
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "lit": "^2.4.1"
  },
  "devDependencies": {
    "@babylonjs/core": "5.16.0",
    "@babylonjs/gui": "5.16.0",
    "@babylonjs/loaders": "5.16.0",
    "@babylonjs/materials": "5.16.0",
    "@babylonjs/procedural-textures": "5.16.0",
    "@colyseus/arena": "0.14.24",
    "@colyseus/monitor": "0.14.22",
    "colyseus.js": "^0.14.13",
    "cors": "^2.8.5",
    "ecsy": "0.4.2",
    "express": "^4.16.4",
    "sass": "^1.54.9",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  }
}

This is my package.json. Mostly auto-generated or copied from examples.

Regards,

Emiel

4

Double check Game\Server\src\rooms\schema\RaiderRoomState.ts

I bet there is a require somewhere in there.

Here is a sample of how I import the vector 3

import { Vector3, Color3 } from ‘@babylonjs/core/Maths/math’

All of that said, I found using es6 imports of Babylon libraries to be more trouble than it’s worth. So I went back to including the CDN library in the header of the HTML.

See this thread Babylon.js bundle size for reasonably minimal project?

1 Like
5

Hi @bigrig

Thanks for the reply. I’m 100% certain there is no require statement directly in the code. I don’t get the error if I don’t use Vector3 in the file though.
This code uses Vector3 and results in the error.

  setPositionFromStartingPosition(): void {
    if (this.x && this.y && this.z && this.mesh) {
      this.mesh.position = new Vector3(this.x, this.y, this.z);
    }
  }

Any other possibilities maybe?

Thanks for the link to the other thread. So you’re saying it isn’t worthwhile treeshaking the modules you need?

Kind regards,

Emiel

6

Can you Control+click on the "@babylonjs/core/Maths/math.vector" part? It should navigate you to node_modules/@babylonjs/core/Maths/math.vector.d.ts. This is a sanity check TS language server works.

Another thing to try, rm -rf node_modules && npm install (or the Windows equivalent).

Yet another, as @bigrig hinted by from ‘@babylonjs/core/Maths/math’, try to import from more close-to-the-root path, go ahead directly with @babylonjs/core, it works for me. Properly working tree shaking should still include only the code you use.

And for me using ES6 modules is definitely worth it, I like to see an explicit list of my dependencies at the beginning of the file where the imports are. That’s not obvious if you just use the BABYLON namespace.

Here’s a file example from a semi-abandoned project of mine, a scripting engine for BabylonJS, that relies solely on ES6 imports.

2 Likes
7

Yea, for me wasnt worth while b/c i need almost every library - so i was only saving a meg or so - and the compile time was killing me. If you’re only using a few libraries, i could see it being more useful.

1 Like
8

Hello @emielergo just checking in if you’re still having issues?