Vue-loader: Syntax error: using spread operator with vuejs

[flashios09]

Hi,

I want to use the spread operator ... inside a .vue but every time i have this error:

 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./webroot/js/App.vue 10:0-37
 @ ./webroot/js/App.vue
 @ ./webroot/js/app.js
 @ multi ./.webpack/server-client ./webroot/scss/app.scss ./webroot/js/app.js

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./webroot/js/components/Todos.vue
Module build failed: SyntaxError: Unexpected token (94:8)

  92 |     },
  93 |     computed: {
> 94 |         ...Vuex.mapGetters(['todos']),
     |         ^

That's my webpack config:

let base = {
    entry: {
        app: ['./webroot/scss/app.scss', './webroot/js/app.js'],
    },
    resolve: {
        extensions: ['.js', '.vue', '.ts', '.scss', '.css', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'eslint-loader',
                exclude: [/node_modules/],
                enforce: 'pre',
            },
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: [/node_modules/, /libs/],
                enforce: 'pre',
            },
            {
                test: /\.js$/,
                exclude: [/node_modules/, /libs/],
                loader: 'babel-loader',
            },
            {
                test: /\.vue$/,
                exclude: [/node_modules/],
                loader: 'vue-loader',
            },
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                loader: 'awesome-typescript-loader',
            },
            {
                test: /\.scss$/,
                loader: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/,
                loader: ['css-loader', 'postcss-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf|wav)(\?.*)?$/,
                use: [{
                    loader: 'url-loader',
                    query: {
                        limit: 10,
                        name: '[name].[hash:7].[ext]',
                    },
                }],
            },
        ],
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                vue: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader',
                        js: 'babel-loader',
                    },
                },
            },
        }),
    ],
};

This is what i have in package.json

"devDependencies": {
    "assets-webpack-plugin": "^3.4.0",
    "autoprefixer": "^6.3.6",
    "awesome-typescript-loader": "^3.0.3",
    "babel-core": "^6.7.4",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-stage-2": "^6.5.0",
    "chokidar": "^1.6.0",
    "css-loader": "^0.26.0",
    "css-mqpacker": "^5.0.1",
    "csswring": "^5.1.0",
    "eslint": "^3.14.1",
    "eslint-config-standard": "^6.0.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.0",
    "eslint_d": "^4.2.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^4.0.0",
    "postcss": "^5.2.6",
    "postcss-loader": "^1.1.1",
    "postcss-merge-rules": "^2.0.10",
    "progress-bar-webpack-plugin": "^1.9.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.1",
    "stylelint-config-standard": "^15.0.0",
    "stylelint-webpack-plugin": "^0.4.0",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.2.3",
    "vue-template-compiler": "2.1.10",
    "webpack": "^2.2.0-rc.4",
    "webpack-dev-server": "^2.2.0-rc.0",
    "webpack-hot-middleware": "^2.15.0"
  }

when i do eslint Todos.vue, i don't have the build module error for the ...Vuex.mapGetters(['todos'])

What i have to do ?

[yyx990803]

This means there's a problem in your .babelrc - stage-2 doesn't seem to be included. Not vue-loader related.

[nathanboktae]

No, this is a vue-loader issue indirectly. I am not using babel at all because I want to support what latest Firefox, Chrome, and Node support. All of these support the spread operator natively as of their latest versions today (8.9.1 for node, Chrome 62, not sure for FF). Therefore a dependency of vue is not support it trying to transform the JS.

[loliconer]

Because webpack does not support spread operator.