Configure Webpack, Node, and the Babel object rest spread transform

Question

I am building a Vue application with Vuex, and want to use the ... operator to merge objects, but I can't seem to install the Babel transformer.

Here's my configuration file. It is the last const definition, and the last entry in the plugins array, that are problems.

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/** here is where I load the object rest spread transformation **/
const RestSpreadTransform = require('babel-plugin-transform-object-rest-spread');

module.exports = {
    entry: {
        admin : './resources/assets/js/admin/admin.js',
        staff : './resources/assets/js/staff/staff.js'

    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules : [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            { test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader'],
                })
            },
            { test: /\.(svg|ttf|woff|woff2|eot)$/,
                use: [{ loader: 'file-loader',
                    options: { outputPath: 'fonts', publicPath: '/dist/fonts'} }]
            },
            {
                test: require.resolve("./bower_components/typeahead.js/dist/typeahead.jquery.js"),
                use: "imports-loader?define=>false"
            },
            {
                test: require.resolve("./bower_components/typeahead.js/dist/bloodhound.js"),
                use: "imports-loader?define=>false"
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /bower_components/,
                options: {
                    js: {
                        loader: 'babel-loader'
                    }
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['public/dist']),
        new ManifestPlugin({ fileName : 'mix-manifest.json' }),
        new ExtractTextPlugin({ filename: 'css/[name].css' }),
        new CopyWebpackPlugin([{from:'./resources/assets/images',to:'images'}]),

        /** Here is where I instantiate the object rest spread transformation  **/
        new RestSpreadTransform({})
    ],
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'js/[name].js'
    }
};

I have installed the transformer with npm install --save-dev babel-plugin-transform-object-rest-spread, as per the instructions at https://babeljs.io/docs/plugins/transform-object-rest-spread/

When I try to build my project, it gives the following error:

TypeError: arguments[i].apply is not a function
    at Compiler.apply (/home/vagrant/Code/Client1/Project1/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/home/vagrant/Code/Client1/Project1/node_modules/webpack/lib/webpack.js:33:19)
    at processOptions (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:335:15)
    at yargs.parse (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:397:2)
    at Object.Yargs.self.parse (/home/vagrant/Code/Client1/Project1/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Where am I going wrong? As you can see, I have configured a number of other plugins with no problems.

Answer 1

It is a babel, not a webpack, plugin.

To use it, do, in your babel-loader config:

        use: {
            loader: 'babel-loader',
            options: {
                presets: ['env'],
                plugins: [require('babel-plugin-transform-object-rest-spread')] // added
            }
        }

And, if you don't have one yet, create at least an empty .babelrc file.

This way, you can remove new RestSpreadTransform({}) from plugins: in the code shown in the question.