Spread operator not recognized by WebPack under Vue

Question

In this answer the following syntax's been suggested.

import { mapActions } from 'vuex'
export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow },
    actions: { updateData, resetData }
  },
  methods: { ...mapActions(['updateData', 'resetData']) }
}

I can't make it work and I'm getting the error:

Module build failed: SyntaxError: C:/.../navigation.vue: Unexpected token (30:8)

29 | methods: {
30 | ...mapActions(['updateData', 'resetData'])
| ^
31 | }

I've tried configuring Babel to stage-2 and adding plugins but it made no change. What can be done about it? How do I troubleshoot it?

babel: {
  presets: ["es2015", "stage-2"],
  plugins: ["transform-object-rest-spread"]
}

webpack.config.js

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      { test: /\.vue$/, loader: 'vue' }]
    },
    babel: {
      presets: ["es2015", "stage-2"],
      plugins: ['transform-runtime']
    },
    resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }
}

You need to apply babel-loader to your Javascript files. Perhaps it is missing. The stage-2 preset has object spread feature, so that's not the case. I would even suggest to give up transform-object-rest-spread. Anyway, please add your Webpack config as well, at least the loader config for JS files. — rishat, Nov 30 '16 at 20:09
@RishatMuhametshin I added the config file, please take a peek. Should I go with stage-3 already? — Konrad Viltersten, Nov 30 '16 at 20:13
I don't know anything about vue, but is your code in contained in a `.vue` or in a `.js` file? The babel transform is only applied to `.js` files. — Felix Kling, Nov 30 '16 at 22:17
@FelixKling Good observation. It's being pulled out and treated as JS file. Not sure why it didn't work. I reinstalled all the packages and went for stage-3 instead and then, for whatever reason, it started to work. Sigh... — Konrad Viltersten, Nov 30 '16 at 22:30

score 3 · Accepted Answer · answered Dec 01 '16 at 02:13

This can be one of the solutions. You need to have a babel loader in your config file for js code, like following:

module: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel',
      include: projectRoot,
      exclude: /node_modules/
    },
    ...
    ...

Following are my babel related dependencies:

"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",

You can see this config and other relevant code in this repo.

Awesome. It's working. However, I don't have the part with *include:projectRoot* and I fear that, although it's not needed right now, it's going to be a source of issues further on. What precisely does it do? Or, even more interestingly - what's going on if it's **not** there? — Konrad Viltersten, Dec 01 '16 at 08:55
You can see it [here](https://github.com/mimani/vue-example/blob/master/build/webpack.base.conf.js#L4), it is just folder location of your code root. — Saurabh, Dec 01 '16 at 09:28

Spread operator not recognized by WebPack under Vue

1 Answers1

Linked