Distribution statement not recognized by WebPack under Vue

Question

The following syntax was proposed in this answer .

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

I cannot get it to work, and I get an error message:

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

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

I tried setting up Babel on stage-2 and adding plugins , but it hasn't changed. What can be done about this? How to fix 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' } } } 

Answer 1

This may be one of the solutions. You need to have babel loader in your configuration file for js code, for example:

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

Below are my dependencies related to Babel:

 "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 configuration and other related code in this repo .