[Ethereum] Getting error -> unexpected token. You may need an appropriate loader to handle this file type

root@kali:~/Documents/oraclize-test# npm run dev

truffle-oraclize-api@0.0.2 dev /root/Documents/oraclize-test
webpack-dev-server

ERROR in ./app/javascripts/app.js
Module parse failed: /root/Documents/oraclize-test/app/javascripts/app.js Unexpected token (124:0)
You may need an appropriate loader to handle this file type.
| })
| }
|
@ multi (webpack)-dev-server/client?http://localhost:8081 ./app/javascripts/app.js
webpack: Failed to compile.

APP.JS

// Import the page's CSS. Webpack will know what to do with it, 
// as it's been configured by truffle-webpack
import "../stylesheets/app.css";

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'
// Import our contract artifacts and turn them into usable abstractions.
// Make sure you've ran truffle compile first
import contract_build_artifacts from '../../build/contracts/OraclizeTest.json'

// OraclizeContract is our usable abstraction, which we'll use through the code below.
var OraclizeContract = contract(contract_build_artifacts);

var accounts;
var account;

window.App = {

  // 'Constructor'
  start: function() {


    // Bootstrap the Contract abstraction for use with the current web3 instance
    OraclizeContract.setProvider(web3.currentProvider);

    // Get the initial account balance so it can be displayed.
    web3.eth.getAccounts(function(err, accs) {
      if (err != null) {
        alert("There was an error fetching your accounts.");
        return;
      }

      if (accs.length == 0) {
        alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
        return;
      }

      accounts = accs;
      account = accounts[0];


    });
  },

  // Show an error
  setStatus: function(message) {
    var status = document.getElementById("status");
    status.innerHTML = message;
  },



}
// Front-end entry point

  window.addEventListener('load', function() {
  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(web3.currentProvider);
  } else {
    console.warn("No web3 detected. Falling back to http://127.0.0.1:9545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:9545"));
  }

  // All systems go, start App!
  App.start();
});

document.getElementById("bet").addEventListener("submit", function(){


    var fromAddress1 = document.querySelector("#bet #fromAddress1").value;
    var privateKey1 = document.querySelector("#bet #privateKey1").value;
    var fromAddress2 = document.querySelector("#bet #fromAddress2").value;
    var privateKey2 = document.querySelector("#bet #privateKey2").value;

    var betAmount = document.querySelector("#bet #betAmount").value;
    var contact = web3.eth.contract(OraclizeContract.abi);
    var sendata = contact.new.getData(web3.utils.toWei(betAmount, "ether"));

    var team = document.querySelector("#bet #team").value;

    if(team == "Home")
    {
      team = 1;
    }
    else
    {
      team = 2;
    }

    var contract = web3.eth.contract(OraclizeContract.abi).at(contractAddress);  
    var amount = contract.amount();
    var data = contract.betOnTeam.getData(team);


   var gasRequired = contract.betOnTeam.estimateGas(team, { 
          from: fromAddress,     
          value: amount,       
          to: contractAddress   
      })

   web3.eth.getTransactionCount(fromAddress, function(error, nonce){

         var rawTx = {         
            gasPrice: web3.toHex(web3.eth.gasPrice), 
            gasLimit: web3.toHex(gasRequired),   
            from: fromAddress,         
            nonce: web3.toHex(nonce),          
            data: data,         
            to: contractAddress,         
            value: web3.toHex(amount)   };

       privateKey = EthJS.Util.toBuffer(privateKey, "hex");
       var tx = new EthJS.Tx(rawTx);         
        tx.sign(privateKey);

      })
  }

Webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js'
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', "stage-2", "stage-3"],
          plugins: ['transform-runtime']
        }
      }
    ]
  }
}
``````````````````
package.json
``````````````````
{
  "name": "truffle-oraclize-api",
  "version": "0.0.2",
  "description": "Frontend example using truffle v3, Oraclize and an API",
  "scripts": {
    "lint": "eslint ./",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "WWWillems",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.14.0",
    "eslint-config-standard": "^6.0.0",
    "eslint-plugin-babel": "^4.0.0",
    "eslint-plugin-mocha": "^4.8.0",
    "eslint-plugin-promise": "^3.0.0",
    "eslint-plugin-standard": "^2.0.0",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "truffle-contract": "^1.1.11",
    "web3": "^0.20.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "react": "16.8.4",
    "react-bootstrap": "1.0.0-beta.5",
    "react-dom": "16.8.4",
    "react-scripts": "2.1.3"
  }
}