title: UnhandledPromiseRejectionWarning: SyntaxError during vue.js build
body: <p>I have just started out on this vue.js project using webpack. So far during dev, everything is working as expected, no errors or warnings in the console. But when building it, it halts and produces the error below:</p>
  
  <p><a href="https://i.stack.imgur.com/guiGy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/guiGy.png" alt="Error shown at terminal"></a></p>
  
  <p>In my components, the only component where I use some possible error catching is with axios calls and I've removed them out just to isolate but even without them in the code already, the error still shows when I build. And I am sure there are no functions in my components that makes Promise rejections, just simple variable declarations and routing navigation calls.</p>
  
  <p>I have tried to update vue-loader and even webpack as suggested in some posts I found on the topic but the issue persists.</p>
  
  <p>Any hint or guide as to what causes this will be really helpful.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is just the default webpack config as provided by vue-cli. I understand that the issue might be in the <strong>webpack.optimize.CommonsChunkPlugin</strong> function but reading the documentation about it and replacing with what is suggested is cryptic for me.</p>
  
  <pre><code>'use strict'
  const path = require('path')
  const utils = require('./utils')
  const webpack = require('webpack')
  const config = require('../config')
  const merge = require('webpack-merge')
  const baseWebpackConfig = require('./webpack.base.conf')
  const CopyWebpackPlugin = require('copy-webpack-plugin')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  
  const env = require('../config/prod.env')
  
  const webpackConfig = merge(baseWebpackConfig, {
    module: {
      rules: utils.styleLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true,
        usePostCSS: true
      })
    },
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
      // http://vuejs.github.io/vue-loader/en/workflow/production.html
      new webpack.DefinePlugin({
        'process.env': env
      }),
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      }),
      // extract css into its own file
      new ExtractTextPlugin({
        filename: utils.assetsPath('css/[name].[contenthash].css'),
        // Setting the following option to `false` will not extract CSS from codesplit chunks.
        // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
        // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
        // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
        allChunks: true,
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap
          ? { safe: true, map: { inline: false } }
          : { safe: true }
      }),
      // generate dist index.html with correct asset hash for caching.
      // you can customize output by editing /index.html
      // see https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency'
      }),
      // keep module.id stable when vendor modules does not change
      new webpack.HashedModuleIdsPlugin(),
      // enable scope hoisting
      new webpack.optimize.ModuleConcatenationPlugin(),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks (module) {
          // any required modules inside node_modules are extracted to vendor
          return (
            module.resource &amp;&amp;
            /\.js$/.test(module.resource) &amp;&amp;
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        minChunks: Infinity
      }),
      // This instance extracts shared chunks from code splitted chunks and bundles them
      // in a separate chunk, similar to the vendor chunk
      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
      new webpack.optimize.CommonsChunkPlugin({
        name: 'app',
        async: 'vendor-async',
        children: true,
        minChunks: 3
      }),
  
      // copy custom static assets
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, '../static'),
          to: config.build.assetsSubDirectory,
          ignore: ['.*']
        }
      ])
    ]
  })
  
  if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
  
    webpackConfig.plugins.push(
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          config.build.productionGzipExtensions.join('|') +
          ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
  
  if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  }
  
  module.exports = webpackConfig
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Skribe says it might be an issue with one of the css so I read about css-loader and perhaps it does have something to do with one of my "<strong>url(..)</strong>" styles. So I edited out all such styles but the problem still persists when I build.</p>
  
  <p>Exasperated, I removed all my codes and basically it is now just 1 simple component that shows a title heading with no css whatsoever. I go build it and that damn error still appears. That's where I completely lost it and gave up. So I converted my app into a single html file and put all components inside it as  templates, and so far I am contented and on track to delivering a proof of concept.</p>
  
  <p>But I would still like to learn why the error still happens despite the last thing I did and how I should fix it from the first instance.</p>