Spread operator not working as expected

[counterbeing]

I can run and use the spread operator like this, anywhere without issue.

let thing = ...[1,2,3]
let thang =  [...thing, 'word']

But, using this as recommended by the vuex docs something like this

export default {
import { mapGetters } from 'vuex'

  computed: {
    ...mapGetters([
      campaigns
    ]),
  }
}

...will make webpack fail...

  ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/renderer/campaigns/index.vue
  Module build failed: SyntaxError: Unexpected token (103:4)

    101 |
    102 |   computed: {
  > 103 |     ...mapGetters([
        |     ^
    104 |       campaigns
    105 |     ]),
    106 |     // testy: function() {

I'm not certain where the problem lies. Clearly the vue-loader is capable of handling the spread syntax... Maybe it's a different implementation of spread?

[dhulme]

I'm having the same issue. I think this is to do with Babel presets//configuration.

[dhulme]

It could be related to the fact babel-preset-env has been archived and moved to another location?

[counterbeing]

I'm doubt it could have anything to do with the archival of babel-preset-env given that the npm repository still seems to be very active. Changing of the git repo should be disconnected from this.

It seems like mapGetters in the failing example is returning an object, which we are then trying to spread. I just looked at the packaged included for spread called transform-es2015-spread and someone commented on a page about how a separate package does object spreading, rather than array. It seems like we either need to add this as a dependency to electron-webpack, or maybe merge it into the existing webpack config for each of our projects.

The other plugin that we need needs to be added somewhere. I'll see if I can get it working in my own project. Not sure if this is something that should be added to the core project, but I love the spread operator personally!

[Leninsky]

I wondered why the spread operator didn't work.

[counterbeing]

I think I have it working! I'm not sure that it's best to configure this via a .babelrc file, but this is what got it working for me:

Add the package

yarn add babel-plugin-transform-object-rest-spread --dev

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}

Please someone, let me know if there's some way I should prefer configuring this via webpack!

[dhulme]

That worked for me too. I guess object spread isn't covered my babel env preset by default as it's still a Stage 3 proposal.

[walleXD]

babel-preset-env works really great to setup up the base for babel but to be honest I think in dev env like React Native & Electron using stage-0 along with the babel-env is perfectly fine as unlike web, in most cases we are including the runtime and so there's no fear of over compilation & failing to take advantage of the improvement in available the run-time features

[counterbeing]

I think having object spread baked in would be a welcome addition. To the maintainers, if you disagree, feel free to close this. Thanks!

[Airkro]

yarn add babel-preset-stage-2 -D

Done!

[loopmode]

Yep, as easy as that.

Just as reminder: any devDependency starting with babel-preset or babel-plugin is automatically added to the webpack pipeline. Should you need some babel-* for other reasons, e.g. you do NOT want it to be used by webpack, you'll have to add it to regular dependencies instead of devDependencies.

About babel-preset-env.. The way I see it, It's meant to help you avoid cross-browser issues, and I don't think it makes much sense in an electron environment where we only ever have one modern webkit browser to deal with. Since size of polyfill code doesn't matter much as well in electron environment.. I personally just use babel-preset-stage-0 all the time, with all the goodies one can imagine (plus babel-plugin-transform-decorators-legacy).

[tomasdev]

Make sure you have the latest electron package. If you don't (currently 4.x) replace in your package.json electron version with * and then run npm update. It will replace back your package.json to an up to date version with semver.

NOTE: this may break your build, proceed at your own risk, as this is updating electron MAJOR version. I needed it to have Chrome 69 (current build as of this writing)