Html-webpack-plugin: TypeError: Cannot use 'in' operator to search for 'html5' in true

Created on 10 Jun 2016 · 7Comments · Source: jantimon/html-webpack-plugin

I got this error when trying to minify a simple html file

here is what the file look like

<!DOCTYPE html>
<html>
<head>
    <title>site</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="app"></div>
</body>
</html>

here is my config

new HtmlWebpackPlugin({
            template: __dirname + '/app/template.html',
            filename: 'html/index.html',
            inject: 'body',
            hash: true,
            minify:true 
        })

if I remove the minify option, the process works fine. So there must be something wrong with minify option.

Source

craigcosmo

Most helpful comment

@kuldeepkeshwar you need to add more options to get it fully minified.

For example, I'm using:

const HtmlWebpack = new HtmlWebpackPlugin({
  template: 'assets/index.ejs',
  filename: 'index.html',
  minify: debug ? false : {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
    html5: true,
    minifyCSS: true,
    removeComments: true,
    removeEmptyAttributes: true,
  },
  hash: true,
});

ilpoo on 19 Jun 2017

👍32 ❤4

All 7 comments

Oh looks like there are no good defaults for minify anymore.

So you have to pick your own: https://www.npmjs.com/package/html-minifier

If you like you can open a pull request and set the same defaults as the html-loader:
https://github.com/webpack/html-loader/blob/2f562c8600c66f54bd853b50509408d03da63ff5/index.js#L71-L88

jantimon on 10 Jun 2016

Same error, so I added html-minifier in my webpack config:

var htmlMinifier = require('html-minifier').minify

new HtmlWebpackPlugin({
       template: __dirname + '/app/template.html',
       filename: 'html/index.html',
       inject: 'body',
       hash: true,
       minify: htmlMinifier
    })

This indeed gets rid of the error, but my html is not minfied ...

Any suggestion? Thanks

leefsmp on 11 Jun 2016

dont pass the minifier but its options

new HtmlWebpackPlugin({
       template: __dirname + '/app/template.html',
       filename: 'html/index.html',
       inject: 'body',
       hash: true,
       minify: 
         {
           removeAttributeQuotes: true
         }
    })

jantimon on 12 Jun 2016

👍6

Thanks!

leefsmp on 16 Jun 2016

@jantimon

new HtmlWebpackPlugin({
       template: __dirname + '/app/template.html',
       filename: 'html/index.html',
       inject: 'body',
       hash: true,
       minify: 
         {
           removeAttributeQuotes: true
         }
    })

this doesn't minify the html

kuldeepkeshwar on 13 Nov 2016

👍5

@kuldeepkeshwar you need to add more options to get it fully minified.

For example, I'm using:

const HtmlWebpack = new HtmlWebpackPlugin({
  template: 'assets/index.ejs',
  filename: 'index.html',
  minify: debug ? false : {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
    html5: true,
    minifyCSS: true,
    removeComments: true,
    removeEmptyAttributes: true,
  },
  hash: true,
});

ilpoo on 19 Jun 2017

👍32 ❤4

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.