Webpack production build is broken

[JoseGoncalves]

When I try to build my app with Webpack for production I get the following error:

ERROR in build.js from UglifyJs
Unexpected token: operator (>) [node_modules/vue2-google-maps/dist/components/infoWindow.vue:13,0][build.js:2258,61]

This error started to happen in v0.9.3. With v0.9.2 it's OK.

[xkjyeah]

Do you have your webpack config?

Starting from 0.9.3 you will need to enable babel for .vue files.

The aim is to support the default settings of vue/webpack and nuxt/starter templates out of the box, since these are the most common options.

[JoseGoncalves]

This is my Webpack config file:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'public': path.resolve(__dirname, './public')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          configFile: './.eslintrc.json'
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        exclude: /\/fonts\//,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: 'img/[name].[hash:7].[ext]',
          publicPath: './dist/'
        }
      },
      {
        test: /\.(woff2)$/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[hash:7].[ext]',
          publicPath: './dist/'
        }
      },
      {
        test: /\.(ttf|eot|svg|woff)$/,
        loader: 'file-loader',
        options: {
          name: '../fonts/[name].[hash:7].[ext]',
          emitFile: false
        }
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      },
      {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      },
      comments: false
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

What do I need to change on it?

[xkjyeah]

https://github.com/vuejs/vue-loader/blob/master/docs/en/options.md

[JoseGoncalves]

The link for vue-loader options doc. in the v14 branch (I'm using v14.2.2) is: https://github.com/vuejs/vue-loader/blob/v14/docs/en/options.md

I changed my config to use babel-loader in vue files, i.e:

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },

and I'm still getting the same error. Am I missing something else?

[xkjyeah]

Um.. any chance you can upgrade your webpack version to v3 or v4?

On Wed, 25 Apr 2018, 01:22 José Miguel Gonçalves, notifications@github.com wrote:

The link for vue-loader options doc. in the v14 branch (I'm using v14.2.2) is: https://github.com/vuejs/vue-loader/blob/v14/docs/en/options.md

I changed my config to use babel-loader in vue files, i.e:

  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        js: 'babel-loader'
      }
    }
  },

and I'm still getting the same error. Am I missing something else?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/395#issuecomment-384013159, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRyPM-Ie4VIp4X3YNbu8RVkuRDTQbks5tr19kgaJpZM4Th8dR .

[JoseGoncalves]

I'm currently using webpack v3.11.0. Should it not work with that version?

[JoseGoncalves]

Found the source of the problem and fixed it. My Webpack template is based in vuejs-templates/webpack-simple. In that template (currently using Webpack v3) the UglifyJS plugin used is an older builtin version. I installed the latest UglifyJS plugin version in my project:

npm i -D uglifyjs-webpack-plugin

and then changed my Webpack production config from:

    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

to

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

/* ... */

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true,
      parallel: true
    }),

Nevertheless, as vuejs-templates/webpack-simple is a fairly common template, I think there should be a note somewhere indicating that this update is needed since v0.9.3.