CODEWITHSUNDEEP
webpackvue.jsbabeljs
Z. Charles Dziura
Z. Charles Dziura

Reputation: 933

Webpack & Babel-Loader - Unexpected Token on Object Rest Operator, with transform-object-rest-spread Plugin Installed

I'm attempting to create a simple VueJS project, and am having trouble following one of the example instructions given in the Vuex documentation. I've created a Vuex module to encapsulate the state for one module of the application like so:

export default new Vuex.Store({
    modules: {
        namespaced: true,
        state: {
            created: false,
            // Other variables...
        },
        mutations: {
            CREATE(state) {
                state.app.created = true;
            }
        },
        actions: {
            createCampaign({ commit }) {
                commit('app/CREATE');
            }
        }
    }
});

I then attempt to use the actions defined above in one of my Vue components:

<template>
    <!-- HTML -->
</template>

<script>
    import { mapActions } from 'vuex';

    let methods = { 
        ...mapActions('app', {
            create: 'createCampaign'
        })
    };

    export default {
        // data, computed...
        methods
    }
</script>

It should then be bundled up by Webpack and compiled using Babel, using the following configuration:

const javascriptRule = {
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
        loader: 'babel-loader',
        options: {
            presets: ['es2015'],
            plugins: [ 'transform-object-rest-spread' ]
        }
    }]
};

const vueRule = {
    test: /\.vue$/,
    loader: 'vue-loader'
};

module.exports = {
    entry: /* app entry... */,

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },

    module: {
        rules: [javascriptRule, vueRule, /* other rules... */]
    },

    // Plugins, other things...
};

However, when I build the application, I'm getting the following error message:

Unexpected token:
...mapActions('app', {
^
    create: 'createCampaign'
})

Am I missing something from my Webpack configuration? I know that the spread operator was recently removed from the stage-2 preset, so I figured that I'd manually add in the spread operator as a plugin.

Thank you in advance for any help!

Upvotes: 1

Views: 4562

Answers (1)

Belmin Bedak
Belmin Bedak

Reputation: 9201

You should move your Babel related configurations from webpack.config.js file to separated .babelrc file in the project root.

Your newly created .babelrc file should looks like this

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

More info here: https://babeljs.io/docs/usage/babelrc/

Upvotes: 3

Related Questions