Dynamic object keys don't work with grunt babel

Question

I'm using these modules

"devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "chai": "^4.1.2",
    "chai-http": "^4.0.0",
    "grunt": "^1.0.2",
    "grunt-babel": "^8.0.0-beta.0",
    "grunt-cli": "^1.2.0",
    "mocha": "^5.1.1"
}

My grunt file

// Configure
grunt.initConfig({
    babel: {
        options: {
            presets: ['@babel/preset-env']
        },
        dist: {
            files: {
                'lib/helper.js': 'src/helper.js',
                'lib/servekaro.js': 'src/servekaro.js'
            }
        }
    }
})

// Load babel tasks
grunt.loadNpmTasks('grunt-babel')

// Default
grunt.registerTask('default', ['babel'])

And this is the error I get

Warning: src/helper.js: Unexpected token, expected ";" (46:38)

  44 |         .filter(([key, value]) => keys.includes(key))
  45 |         // Map arrays to object entry
> 46 |         .map(([key, value]) => { [key]: val })
     |                                       ^
  47 |         // Reduce object entries into single object
  48 |         .reduce((obj, entry) => Object.assign(obj, entry), {})
  49 | } Use --force to continue.

Help?

Answer 1

That is a real syntax error. You should change

.map(([key, value]) => { [key]: val })

to

.map(([key, value]) => ({ [key]: val }))

where the wrapped parens make the body of the function parse as an expression, and thus an object literal.

When an arrow function's body starts with {, that means the function body is a list of statements, not an object. To start with a {, you could do

.map(([key, value]) => { 
  return { [key]: val };
})