Webpack-encore: Spread operator from Vuejs

[JohnnyEvo]

Hi,

I would like use the spread operator (...) from Vuejs file (.vue) but Yarn command yarn run encore dev fails :

▶ yarn run encore dev
yarn run v1.3.2
warning package.json: No license field
$ /home/toto/Projets/www-dev/private/nutritix/node_modules/.bin/encore dev
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                               22:03:25

 error  in ./assets/scripts/components/notification.vue

Syntax Error: Unexpected token (50:8)

  48 | export default {
  49 |     methods: {
> 50 |         ...mapActions({"setNotificationStore": "setNotification", "setNotificationVisibilityStore": "setNotificationVisibility"}),
     |         ^
  51 |         /**setVisibiliteNotificationStore
  52 |          *
  53 |          * @param time



 @ ./assets/scripts/components/notification.vue 8:0-273 9:0-286
 @ ./assets/scripts/app.js

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
````

This is my webpack encore config : 

```js
// webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .addEntry('app', './assets/scripts/app.js')
    .addEntry('style', './assets/styles/style.scss')

    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    .enableBuildNotifications()

    .enablePostCssLoader()

    .createSharedEntry('vendor', [
        'knacss/css/knacss.css'
    ])

    .enableSassLoader()
    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

My Vue file :

    import {mapGetters, mapActions} from "vuex";

    export default {
        methods: {
            ...mapActions({"setNotificationStore": "setNotification", "setNotificationVisibilityStore": "setNotificationVisibility"}),
            /**setVisibiliteNotificationStore
             *
             * @param time
             */
            timer (time = 3000) {
                setTimeout(() => {
                        this.setNotificationVisibility(false)
                    },
                    time);
            }
        },
        computed: {
            ...mapGetters(['notification', 'visible'])
        }
    }

My package.json :

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.1",
    "autoprefixer": "^7.2.5",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.10",
    "sass-loader": "^6.0.6",
    "vue": "^2.5.13",
    "vue-loader": "^13.7.0",
    "vue-template-compiler": "^2.5.13",
    "webpack-notifier": "^1.5.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "css-loader": "^0.28.9",
    "jquery": "^3.3.1",
    "knacss": "^7.0.1",
    "lodash": "^4.17.4",
    "vuejs": "^3.0.1",
    "vuex": "^3.0.1"
  }
}

From the official documentation , babel is configured with env preset, and the env preset supports ES6, so the spread operator. Why my code not compile ?

Thank you

[Lyrkan]

Hi @JohnnyEvo,

The spread properties proposal reached stage 4 a few days ago, which means that it isn't part of ES6 (=ES2015) but will be part of ES2018.

Babel will probably move it to its env preset later this year but right now you need to add the stage 3 preset in order to use that feature.

[JohnnyEvo]

Ok thank you @Lyrkan , so I use babel plugin transform-object-rest-spread to resolve my issue.

[niketpathak]

Yep, adding the stage 3 preset made it work. (Here's a Reference Tutorial)