"...mapActions" Unexpected token

I have a Vue component that is trying to use:

Register.vue

<script>
import { mapActions } from 'vuex'

// ...

methods: {
    // ...
    ...mapActions({
        storeDetails: 'updateRegisterDetails'
    })
}

// ...
</script>

However, when I run yarn run dev I get the following output:

 ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/js/auth/components/Register.vue

SyntaxError: Unexpected token (54:8)

  52 |             this.$router.push('/register/payment')
  53 |         },
> 54 |         ...mapActions({
     |         ^
  55 |             storeDetails: 'updateRegisterDetails'
  56 |         })
  57 |     }



 @ ./resources/assets/js/auth/components/Register.vue 3:2-131
 @ ./resources/assets/js/auth/routes.js
 @ ./resources/assets/js/auth.js
 @ multi ./resources/assets/js/auth.js

                                Asset       Size  Chunks                    Chunk Names
     /js/auth.51d4dde1906cc579aad7.js    2.22 MB       0  [emitted]  [big]  /js/auth
      /js/app.ecd4f96976599fef6161.js    2.18 MB       1  [emitted]  [big]  /js/app
    /css/app.8598eae19ab06ab7bf2b.css     177 kB       1  [emitted]         /js/app
 /js/auth.51d4dde1906cc579aad7.js.map    2.74 MB       0  [emitted]         /js/auth
  /js/app.ecd4f96976599fef6161.js.map    2.68 MB       1  [emitted]         /js/app
/css/app.8598eae19ab06ab7bf2b.css.map    10.3 kB       1  [emitted]         /js/app
                    mix-manifest.json  344 bytes          [emitted]
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any idea what I should be doing here? I don’t see anything documented in regards to configuring anything additional for Vue.

webpack.mix.js

const { mix } = require('laravel-mix');

if (process.env.NODE_ENV == 'production') {
    mix.disableNotifications();
}

mix.webpackConfig({
    devtool: 'cheap-source-map'
});

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/auth.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version(['css/app.css', 'js/app.js', 'js/auth.js']);

[ellisio]

Running the following:

yarn add --dev babel-preset-es2015 babel-preset-stage-2

Then creating a .babelrc in the root of our project with:

{
    "presets": ["es2015", "stage-2"]
}

Resolved this.

[yunhan0]

Don’t have to install babel-preset-stage-2, simply add Object rest spread transform babel plugin.

npm install --save-dev babel-plugin-transform-object-rest-spread

in .babelrc, add the following: { "plugins": ["transform-object-rest-spread"] }