Blackbeard

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.