Vue-loader: Minification fails with ES6 features in Vue components

[kvchen]

My component code will transpile when invoking webpack normally (i.e. webpack), but will throw an error when attempting to compile it under production conditions (including minification, with webpack -p). The error starts off looking something like:

ERROR in bundle.js from UglifyJs
TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (/Users/kevinchen/code/queueball/app/public/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-node.js:100:32)

This error doesn't occur when there is no ES6 code inside the <script> tags for the Vue components. For example, something like this in the component's <script> section would fail:

import store from '../store';

export default {
  name: 'TicketView',
  data() {
    return store;
  },
}

while this would work:

const store = require('../store');

module.exports = {
  name: 'TicketView',
  data: function() {
    return store;
  },
}

My webpack configuration is as follows:

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist/static',
    publicPath: '/static/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          'presets': ['es2015', 'stage-3'],
        },
      },
      { test: /\.vue$/, loader: 'vue' },
    ],
  },
};

I suspect it's an issue with my webpack config, but I'm not certain whether it's an issue with vue-loader or an additional option I should be passing into UglifyJS. Any help would be greatly appreciated!

[yyx990803]

What version of vue-loader are you using? This should be fixed in the next minor release - in the meanwhile, try adding comments: false to your babel config.

[kvchen]

I'm currently using "vue-loader": "^8.0.0" in my package.json. I tried adding comments: false to my Babel config as follows, but I'm still getting an error upon minification:

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist/static',
    publicPath: '/static/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          'presets': ['es2015', 'stage-3'],
          'comments': false,
        },
      },
      { test: /\.vue$/, loader: 'vue' },
    ],
  },
};

[yyx990803]

Try 8.0.1

[kvchen]

Yup, looks like that worked! Thanks for the help :)

[zolotykh]

I've got same error.
[email protected]

ERROR in comments.bundle.js from UglifyJs
Unexpected token punc «(», expected punc «:»

[erictsai6]

@zolotykh create a .babelrc or put your babel configuration in the package.json as follows
"babel": { "presets": ["es2015"] }

[hackuun]

I have similar error with vue-cli webpack starter

ERROR in static/js/vendor.65207c1cf20abf7ff70e.js from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][static/js/vendor.65207c1cf20abf7ff70e.js:33623,12]

adding "babel" settings didn't solve

[LinusBorg]

you probably have a dependency in /node_modules that uses ES6 code. node__modules isn't transpiled by default.

[Ornhoj]

@LinusBorg Was about to write this as well.
My take on it, is that the internal webpack uglify does not support ES6 syntax - hence using the updated user imported version solve the problem in my case:
https://github.com/webpack-contrib/uglifyjs-webpack-plugin

Fyi.. I still suggest transpiling /node_modules for cross browser support..