Webpack Spread Operator Compatibility

[ptchccnt2015]

Hi,

I'm having trouble using this module for my project.

Dependencies Package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config webpack.conf.js", }, "dependencies": { "android-versions": "^1.4.0", "axios": "^0.18.0", "cordova-android": "^7.1.4", "cordova-ios": "^5.0.1", "cordova-plugin-whitelist": "^1.3.3", "node-sass": "^4.12.0", "onsenui": "^2.9.1", "properties-parser": "^0.3.1", "sass-loader": "^7.1.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue": "^2.5.0", "vue-ctk-date-time-picker": "^2.0.6", "vue-onsenui": "^2.5.0", "vue-pull-to": "^0.1.8", "vue-router": "^3.0.6", "vue-swipe-actions": "^2.0.0-beta.18", "vuelidate": "^0.7.4", "vuesax": "^3.9.0", "vuex": "^3.0.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "css-loader": "^0.28.0", "eventsource-polyfill": "^0.9.6", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.3.0", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.5.0", "webpack": "^3.7.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" },

.babelrc

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": [ "> 1%", "iOS >= 8.0", "Android >= 4.4", "Chrome >= 30", "Safari >= 9", "Firefox ESR", "Opera 12.1" ] } }], "stage-2" ], "plugins": ["transform-runtime"] }

ERROR

Module parse failed: Unexpected token (99:4) You may need an appropriate loader to handle this file type. | }); | this._emitRevealed({ | ...this.innerRevealed, | [index]: event.side, | });

@ ./node_modules/vue-swipe-actions/src/components/index.js 2:0-36 @ ./node_modules/vue-swipe-actions/src/index.esm.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue

Thanks in advance...

[nanov]

please share your webpack configuration....

[ptchccnt2015]

Here is my configs

webpack.conf.js

'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder')

const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool,

// these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { poll: config.dev.poll, } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), ] })

module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port

  // Add FriendlyErrorsPlugin
  devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
      messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
  }))

  resolve(devWebpackConfig)
}

}) })

webpack.base.conf.js

'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) { return path.join(__dirname, '..', dir) }

const createLintingRule = () => ({ test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } })

module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /.(png|jpe?g|gif|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]'), publicPath: process.env.NODE_ENV === 'production' ? '../../' : '/' } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }

[nanov]

{
test: /.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

could you try and chnage it to :

{
test: /.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/vue-swipe-actions/'), resolve('node_modules/vue-swipe-actions/dist/')]
},

[ptchccnt2015]

Great! It worked!

Many Thanks!

[nanov]

Ok thank you for reporting, this is something I would need to fix so it won't be the case.