SyntaxError: Unexpected token * on an quickstarted Electron typescript application

Bugs
1

Hi,

i wanted to jump start a simple babylonJS application with electron and typescript. The compilation works just fine but the appearing render window gives me an SyntaxError: Unexpected token * at

BabylonTypescriptExample/node_modules/@babylonjs/core/Engines/engine.js:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import * as tslib_1 from “tslib”;

I used the scoped NPM libraries as the following is part of my package.json:

“@babylonjs/controls”: “^1.0.0-alpha.1”,
“@babylonjs/core”: “^4.0.3”,
“@babylonjs/gui”: “^4.0.3”,
“@babylonjs/inspector”: “^4.0.3”,
“@babylonjs/loaders”: “^4.0.3”,
“@babylonjs/materials”: “^4.0.3”,
“@babylonjs/post-processes”: “^4.0.3”,
“@babylonjs/procedural-textures”: “^4.0.3”,
“@babylonjs/serializers”: “^4.0.3”,
“@babylonjs/viewer”: “^4.0.3”,

Here is the Code of my Renderer (which runs in the Webkit window):

import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { ArcRotateCamera, Camera } from '@babylonjs/core/Cameras';
import { MeshBuilder } from '@babylonjs/core/Meshes';
import { Vector3 } from '@babylonjs/core/Maths/math';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';

export class Application {
  private engine: Engine;
  private scene?: Scene;
  private camera?: Camera;

  constructor(private canvas: HTMLCanvasElement, private autorun = true) {
    this.engine = new Engine(canvas, true);

    this.prepareScene();
    this.prepareCamera();

    autorun && this.run();
  }

  private prepareScene() {
    this.scene = new Scene(this.engine);
    var sphere = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, this.scene);
    var light1 = new HemisphericLight("light1", new Vector3(1, 1, 0), this.scene);
  }

  private prepareCamera() {
    if (this.scene) {
      this.camera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), this.scene);
      this.camera.attachControl(this.canvas, true);  
    }
  }

  public run() {
    this.engine.runRenderLoop(() => {
      this.scene && this.scene.render();
    });
  }
}

new Application( <HTMLCanvasElement>document.getElementsByTagName('canvas').item(0) );

To reproduce just run the following commands:

mkdir example && cd example && npm init (index will be ./dist/main.js)
npm i electron typescript @babylonjs/controls @babylonjs/core @babylonjs/gui @babylonjs/inspector @babylonjs/loaders @babylonjs/materials @babylonjs/post-processes @babylonjs/procedural-textures @babylonjs/serializers @babylonjs/viewer
mkdir dist

then paste the renderer.ts (above) in the folder as well as those 2 files:
main.ts

import { app as electron, BrowserWindow } from 'electron';

electron.on('ready', () => {
  const win = new BrowserWindow({
      webPreferences: { nodeIntegration: true }
  });
  win.loadFile('./index.html');
  win.on('closed', () => electron.quit() );
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>BabylonJS Test</title>
    <style>
      /* Normalize */
      html, body, canvas {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      html, html * {
        padding: 0;
        margin: 0;
      }
      canvas {
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script> require('./dist/renderer.js') </script>
  </body>
</html>

tsc && node_modules/electron/dist/electron .

As said, compiling the typescript code works just fine. Also tslint is fine. The renderer however comes up with the syntax error which i assume comes from different module implementation. I likely have not imported the library correctly. The approach i commonly find about babylonJS + typescript (import * as BABYLON from …), is just not intuitive at all.

If anyone got a glue or needs more information, please let me know.
Thanks

edit: just had a look the the engine.js inside node_modules. It is written with es2015 features like import/export, which is supported by node but not the browserWindow of electron (so can’t be loaded directly). Can someone point me into a direction, how to have tsc compile the imported files as well?

2

Pinging @sebavan

3

I guess you will need to add a transpiler like Babel to convert the es2015 code to es5 to ensure the full support you look for.

In your case maybe you could use the none es6 version of our npm packages : NPM - Babylon.js Documentation ???

4

I applied the solution with non scoped packages from npm. My package.json dependencies now look like this:

“babylonjs”: “^4.0.3”,
“babylonjs-gui”: “^4.0.3”,
“babylonjs-loaders”: “^4.0.3”,
“babylonjs-materials”: “^4.0.3”,
“babylonjs-post-process”: “^4.0.3”,
“babylonjs-procedural-textures”: “^4.0.3”,
“babylonjs-serializers”: “^4.0.3”,
“babylonjs-viewer”: “^4.0.3”,

and my ts import like this:

  import {
    Engine,
    Scene,
    Camera,
    MeshBuilder,
    HemisphericLight,
    Vector3,ArcRotateCamera
  } from 'babylonjs';

Can i flag this thread as solved? Are there any needs of an electron Boilerplate application? Could upload it to github for example.

Thanks and regards!

1 Like
5

Would be awesome to have the boilerplate link somewhere in the documentation like we have for react and so on :slight_smile:

It might help all the ppl looking for it

6

With pleasure: https://github.com/blendmaker/BabylonJsDesktop

2 Likes