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

[kristianmandrup]

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'
};

[kristianmandrup]

Turned out it was due to the setting --optimize-minimize I had forgot to remove

[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.

[kristianmandrup]

Thanks a lot! Super jungle! Are there any places with recipes for common setups? The rules keep changing to fast to keep track :P

[boopathi]

Since Babili is still in its early stages, I'm not aware of any boilerplates / setup blog posts that use this.

[kristianmandrup]

I still get a result file of almost 1MB, pure JS as far as I know.

[aldrinc]

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