Ajuda com aprendizado em javascript - babylonjs - webpack. Classe náo compila com variaveis da classe.

Ola, boa tarde.

Estou tentando montar um projeto de game de cartas em webgl usando babylonjs+webpack. O problema é que na hora de compilar uma classe, o webpack não esta deixando se eu declaro variaveis da classe logo acima do construtor, retornando o seguinte erro:

Erro:

RROR in ./src/game.js 33:9
Module parse failed: Unexpected token (33:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class Game {
|

> scene;
| clickedButtonBJ;

|
@ ./src/index.js 3:0-29 17:15-19

Segue meus arquivos de configuração do webpack e do package.json e o código especifico da classe game.js.

Webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [

 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 filename: 'index.html',
 inject: true,
 template: path.resolve(__dirname, 'src', 'index.html'),
 }),
 ],
 module: {
 rules: [
 {
 test: /\.jsx?$/,
 loader: 'babel-loader',
 exclude: /node_modules/,
 query: {
 presets: ['es2015']
 }
 }
 ]
 }
}

	 

	 

	package.json:

{
"name": "synthgaming.tech",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"run-dev": "npx webpack-dev-server",
"build": "webpack --config=webpack.config.prod.js",
"build-dev": "webpack --config=webpack.config.dev.js",
"start": "webpack-dev-server --config=webpack.config.dev.js --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babylonjs/core": "^4.1.0",
"@babylonjs/gui": "^4.1.0",
"@babylonjs/inspector": "^4.1.0",
"@babylonjs/loaders": "^4.1.0",
"@babylonjs/materials": "^4.1.0",
"@babylonjs/post-processes": "^4.1.0",
"@babylonjs/procedural-textures": "^4.1.0",
"@babylonjs/serializers": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.2.0",
"ts-loader": "^7.0.0",
"typescript": "^3.8.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}

game.js:

import {
Vector3, Color3
} from "@babylonjs/core/Maths/math";
import {
ArcRotateCamera
} from "@babylonjs/core/Cameras/arcRotateCamera";
import {
HemisphericLight
} from "@babylonjs/core/Lights/hemisphericLight";
import {
Mesh
} from "@babylonjs/core/Meshes/mesh";

import {
GridMaterial
} from "@babylonjs/materials/grid";

import {
Sound, HighlightLayer
} from "@babylonjs/core"

import {
Image, Control, AdvancedDynamicTexture, Button, TextBlock
} from "@babylonjs/gui";

import {
Scene
} from "@babylonjs/core";

export default class Game {

 scene;
 clickedButtonBJ;

 constructor(){
 // this.scene = _scene;
 this.clickedButtonBJ = false;
 }

 Start(scene) {

 var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
 camera.setPosition(new Vector3(0,1,-40));
 camera.setTarget(Vector3.Zero());

 var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
 light.intensity = 0.49;

 var tetraMaterial = new GridMaterial("Tetragrid" , scene);

 var tetra = new Mesh.CreatePolyhedron("tetra", {type: 0, size: 3}, scene);

 tetra.position.y = 4.8;
 tetra.position.z = -15;
 tetra.rotation.z = Math.PI/2;
 tetra.rotation.x = 4*Math.PI/3;

 var hl1 = new HighlightLayer("hl1", scene);
 hl1.addMesh(tetra, Color3.Magenta());

 tetra.material = tetraMaterial;

 var groundMaterial = new GridMaterial("grid", scene);
 groundMaterial.lineColor = new Color3(2,2,4);

 var ground = new Mesh.CreateGround("ground1", 600, 600, 3, scene);
 ground.material = groundMaterial;

 var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", scene);

 var titleImage = new Image("title","../res/Title.png");
 titleImage.width = "800px";
 titleImage.height = "300px";
 titleImage.top = "-50px";
 titleImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
 titleImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
 advancedTexture.addControl(titleImage);

 var backMusic = new Sound ("Music", "../res/raia-bellzy.wav",scene, null, {
 loop: true,
 autoplay: true
 });

 var alpha = 0;
 scene.registerBeforeRender(() => {

 tetra.rotation.y += 0.005;

 alpha += 0.03;
 hl1.blurHorizontalSize = 0.3 + Math.cos(alpha) * 0.6 + 0.6;
 hl1.blurVerticalSize = 0.3 + Math.sin(alpha / 3) * 0.6 + 0.6;
 });

 }

 createNewScene(_engine) {
 var scene = new Scene(_engine);
 scene.autoClear = false;

 var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
 camera.setPosition(new Vector3(0,1,-40));
 camera.setTarget(Vector3.Zero());

 var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
 light.intensity = 0.49;

 return scene;
 }

 disposeScene(_scene) {
 _scene.dispose();
 }

 createPrimaryMenu(_scene) {

 var advancedTexture = new AdvancedDynamicTexture.CreateFullscreenUI("PrimaryUI", _scene);

 var buttonBJ = Button.CreateSimpleButton("butBJ","BlackJack");
 buttonBJ.width = "250px";
 buttonBJ.height = "80px";
 buttonBJ.color = "Black";
 buttonBJ.cornerRadius = 3;
 buttonBJ.background = "magenta";
 buttonBJ.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
 buttonBJ.left = "50px";

 buttonBJ.onPointerMoveObservable.add(function(){
 textblock.text = "Click to Play BlackJack"
 });
 buttonBJ.onPointerOutObservable.add(function() {
 textblock.text = "";
 });
 buttonBJ.onPointerUpObservable.add(function () {

 ////

 this.clickedButtonBJ = true;
 console.log("0.8");

 });
 advancedTexture.addControl(buttonBJ);

 var textblock = new TextBlock("textblock", "");
 textblock.width = 0.2;
 textblock.height = "40px";
 textblock.color = "White";
 advancedTexture.addControl(textblock);

 }

}

	Eis a questão, Se eu removo as duas linhas:

	 

scene;
clickButtonBJ;

	 

	o código roda e eu consigo acessar o site... no entanto, não carrega na página a titleImage e nem a musica.

	Alguém pode me ajudar?

	Obrigado.