Basic setup of running Babylon.js NullEngine with server side (node.js) using TypeScript

Questions
1

Hi all!

I have a small pickle with how to setup my Babylon.js server side setup using NullEngine and TypeScript. I have a skeleton of a client side of the game done and I would like to share as much code as possible running the game server side. Trying to build kind of authoritative game server here :slight_smile:

Basically I have a Game class, in Game.ts. It sets up all the game stuff, such picking if we should use regular engine or the null engine. So the first line in this Game.ts file is this:
import { Engine, NullEngine } from '@babylonjs/core'

Then I have my server.ts file, where I try to import the game with the regular import syntax.
import Game from '../../common-game/src/Game'

After compiling this using tsc and trying to run with node server.js (or, just using ts-node), I get this error:
export * from "./abstractScene";
^^^^^^
SyntaxError: Unexpected token 'export'

So everything fails, but I don’t quite understand why. Could someone share light on this? How NullEngine should be utilized in Node.js environment if we want to use import statements?

2

You would need to use something like babel to transpile es6 import style to node ones on older node version.

If think the syntax is only valid from node 14 and above if I am not mistaken.

3

But if I use the current lts Node (v14.15.0) there should be no problem right? :thinking: Yet, the above error still persists.

Maybe I do have to do some babel magic transpiling, but before that I would like to know where the actual problem lies…

4

I made a small repo to show the actual problem :grin:
Here it is: GitHub - panuchka/babylonjs-typescript-nullengine-example

If someone would be so kind to check it and point out what I’m doing wrong here…
Installation is simple if you have node and npm installed. Just:

  1. npm install
  2. npm run build
  3. npm run start

You can also try the node-ts-dev one which is npm run dev. They all should give the same error though. I’m really just hoping to find out the best way to deal with the problem :thinking:

5

Could someone from the dev team help me with this or is the question itself weird? Do you know who would be the best person to consult about this @sebavan ?

The docs don’t really share any light on setting things up the ES6 / TypeScript way… Meaning this page: Running Babylon.js On A Server | Babylon.js Documentation

Since the error comes from Babylon.js import, I just would like to:

  1. Figure out if this error is “working as intended”, meaning that I am trying to use NullEngine / Babylon.js server side as it is not meant to be used.
  2. How to properly set up NullEngine TypeScript/ES6 project with imports/exports as you would recommend.
6

As explained earlier node-js expects common.js import style until version 14 so no import / export keywords could work before.

In order to convert our import statements, either you could rely on a bundler like webpack/parcel/rollup or you could transpile your files using babel.

Here using babel and babel-node for instance, you can add the following dependencies:

"devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/node": "^7.12.6",
    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
    "@babel/preset-env": "^7.12.1"
  }

then add a babel.config.js at the root containing:

module.exports = function (api) {
  api.cache(false);

  return {
    presets: [ "@babel/preset-env" ],
    plugins: [ "@babel/plugin-transform-modules-commonjs" ],
  };
}

Now in your start command replace node by babel-node:

"start": "babel-node -i [] dist/index.js",

-i [ ] will help transpiling file from the node_modules folder as well.

But as a general way here using a bundler like you would do for the web might make things easier

7

Hi again!

As I said earlier, I am using Node version 14+ in my project. I’m also using @babylonjs/core -package, which should be ECMAScript modules compatible. Node version 14+ support ECMAScript modules as well. I do not quite understand why I need the babel transformations, as everything should, in theory, work well server side (node.js) with import/export statements.

To further solidify my point, how is it that I can import similarly styled physics library cannon without problems, but for Babylon it can’t be done? Is there some issue when babylon esm build is generated? :thinking:
Example: cannon-es/dist at master · pmndrs/cannon-es · GitHub

8

image
image2800Ă—122 21.4 KB

Basically, our files are not .mjs and we do not so far have the flag Modules: Packages | Node.js v15.3.0 Documentation which would explain why they are not recognized in node.

Our compilation works for sure as we use it daily in our dev env.

I ll try to add the tag for our next releases.

1 Like
9

Awesome! :heart_eyes: I’ll be more than happy to test it when it lands in npm!

10

The type: "module" -addition might have done the trick. I now managed to get my project and the small example running!

It was a tough fight though. Had to do few modifications to this project: GitHub - panuchka/babylonjs-typescript-nullengine-example

  1. Add type: module to the project’s package.json as well
  2. Add –experimental-specifier-resolution=node as a node parameter in package.json script. Found out it here ESM support: soliciting feedback · Issue #1007 · TypeStrong/ts-node · GitHub
  3. Edit the tsconfig.json to have "module": "ESNext" and "target": "ESNext" (something like es6 might be ok too…).

After the modifications to the project the build and start scripts work. All in all I’m pretty surprised how confusing the Node.js ecosystem is for the ESM field…

If somebody from the future is reading this, you need at least Babylon.js version 5.0.0-alpha.3 for this to work.