Error module build failed, parse error with UglifyJsPlugin in webpack - docker

Question

I'm having an error I can't find a solution to.
I have a new VueJS project that I'm running in docker. It works fine in dev mode, but fails when I try to build for prod. The error is included below, and seems to be with eslint. I've removed sections until it works, and narrowed it down to the UglifyJsPlugin, but I don't know why.
I know I can remove the Uglify process, but I don't want to -- I want to solve the problem!
Errors look like this:
ERROR in ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./~/eslint-loader!./src/components/UserInput.vue
Module build failed: Error: Parse Error: <input class="form-control" type:"text" v-model="newTodoText" v-on:keyup.enter="createTodo" placeholder="New todo">
<span class="btn btn-primary input-group-addon" v-on:click="createTodo">
Add
</span>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-danger" v-on:click="showClearModal">
Clear all
</button>
</div>
</div>
<hr>
<div id="clearModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Are you sure you want do delete them all?
</div>
<div class="modal-body">
<p>This will permanently destroy all todos, do you really want to do this?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok" v-on:click="clearTodos">Delete</button>
</div>
</div>
</div>
</div>
at new HTMLParser (/code/node_modules/html-minifier/src/htmlparser.js:236:13)
at minify (/code/node_modules/html-minifier/src/htmlminifier.js:945:3)
at Object.exports.minify (/code/node_modules/html-minifier/src/htmlminifier.js:1294:10)
at Object.module.exports (/code/node_modules/vue-html-loader/index.js:85:26)
# ./src/components/UserInput.vue 4:19-173
My webpack config looks like this for BASE:
var path = require('path')
var config = require('../config')
var cssLoaders = require('./css-loaders')
var projectRoot = path.resolve(__dirname, '../')
var webpack = require('webpack')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: path.join(config.build.assetsSubDirectory, '[name].[hash:7].[ext]')
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
vue: {
loaders: cssLoaders()
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether'
})
],
eslint: {
formatter: require('eslint-friendly-formatter')
}
}
and PROD
var path = require('path')
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var cssLoaders = require('./css-loaders')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: path.join(config.build.assetsSubDirectory, '[name].[chunkhash].js'),
chunkFilename: path.join(config.build.assetsSubDirectory, '[id].[chunkhash].js')
},
vue: {
loaders: cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
API_HOST: JSON.stringify(config.prod.api_host)
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(path.join(config.build.assetsSubDirectory, '[name].[contenthash].css')),
// 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: process.env.NODE_ENV === 'testing'
? 'index.html'
: 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
}
})
]
})
What am I missing?!