ERROR in bundle.js from UglifyJs: Unexpected token keyword «function»

I continue to get:

ERROR in bundle.js from UglifyJs
Unexpected token keyword «function», expected punc «,» [./src/lock.js:1,0][bundle.js:28150,3119]

Error is the async keyword!? Also, have been struggling trying to get it down in size from 2-4mbs!!! WTF 😦 Why is compiling JS still such a jungle in 2017!?

    key: 'onAuth0Login',
    value: async function onAuth0Login(_ref3) {
      var auth0Token = _ref3.auth0Token,
          profile = _ref3.profile;

$ nmp run prod

npm scripts

    "build": "webpack --progress --colors --optimize-minimize",
    "prod": "BABEL_ENV=production npm run build",

What am I missing?!

.babelrc

{
  "presets": [
    [
      "es2015", {
        "modules": false
      }
    ]
  ],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  },
  "plugins": ["transform-object-rest-spread"]
}

package.json

  "devDependencies": {
    "ava": "^0.19.1",
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-babili": "0.0.12",
    "babel-preset-env": "^1.3.1",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "babili": "0.0.12",
    "webpack": "^2.5.1"
  },
  "babel": {
    "presets": [
      "env"
    ],
    "plugins": [
      "transform-object-rest-spread",
      "transform-runtime"
    ]
  },
  "ava": {
     ...
  }

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      }
    }]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map'
};

[boopathi]

There are couple of things here -

1. es2015 preset doesn’t transform async functions. Consider using babel-preset-env. Also, you can use es2017 preset alongside es2015 to convert everything to ES5, but it’s generally better to use babel-preset-env.
2. Using babili and uglify. I assume you’re bundling/calling webpack as webpack -p as this includes Uglify Plugin as the last step. Also, you’re using Babili in your babelrc. Uglify doesn’t understand ES6 (uglify-es does). Use only one minifier - it’s not necessary to use both babili and Uglify.
3. Using babili as another preset in babelrc. There are some issues with babili when used along with es2015 preset, consider using babili-webpack-plugin and do NOT run webpack with webpack -p as it includes UglifyJS. More about why to use babili-webpack-plugin is in its own docs.

[aldrinc]

@boopathi Saved me quite a bit of time fussing with Webpack!