"Uncaught SyntaxError: Unexpected token {" when importing in TypeScript

Question

Question: Why do I get "Uncaught SyntaxError: Unexpected token {" at line 2 of Game.ts file ?

I have two typescript files listed below. I don't get any errors when compiling my project through visual studio. However, when I look at the console in my browser (tried different ones) I get this error and my game scene is not rendered. I use TypeScript 3.0 and ES6.

ColorHelper.ts

export class Color {
    ColorFromRGB(r: number, g: number, b: number): BABYLON.Color3 {
        return new BABYLON.Color3(r / 255, g / 255, b / 255);
    }
}

Game.ts

///<reference path="../node_modules/babylonjs/babylon.d.ts" />
import { Color } from "./helpers/ColorHelper";

class Game {
    ...
}

Here is my tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "types": [ "babylonjs" ],
    "target": "es6",
    "sourceMap": true,
    "module": "es6"
  }
}

Here is my package.json

{
  "name": "BabylonTest",
  "version": "1.0.0",
  "description": "",
  "main": "Game.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babylonjs": "^3.2.0"
  }
}

Answer 1

When using ES6, you have to remember to add the compilerOptions module , target is ES6 but module is commonjs

  {  
        "compilerOptions": {
             "module": "commonjs", // add this instead of es6 as module
        }
    }