Underscores template not being parsed

[TomAuger]

I'm sure this is a stupid config issue on my end. The index.html file that is being emitted is not interpolating the underscores template {% %} markup, so the result looks like this:

{% if (o.htmlWebpackPlugin.files.favicon) { %} {% } %} {% if (o.htmlWebpackPlugin.options.mobile) { %} {% } %} {% for (var css in o.htmlWebpackPlugin.files.css) { %} {% } %} {% if (o.htmlWebpackPlugin.options.unsupportedBrowser) { %} {% } %} {% if (o.htmlWebpackPlugin.options.appMountId) { %}
{% } %} {% if (o.htmlWebpackPlugin.options.appMountIds && o.htmlWebpackPlugin.options.appMountIds.length > 0) { %} {% for (var index in o.htmlWebpackPlugin.options.appMountIds) { %}
{% } %} {% } %} {% if (o.htmlWebpackPlugin.options.window) { %} {% } %} {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} {% } %} {% if (o.htmlWebpackPlugin.options.devServer) { %} {% } %} {% if (o.htmlWebpackPlugin.options.googleAnalytics) { %} {% } %}

Here's the relevant section of my webpack.config.js:

plugins: [
        // Auto-generate HTML index.html file
        new HtmlWebpackPlugin({
            template: path.resolve('node_modules/html-webpack-template/index.html'),
            title : APP_TITLE,
            mobile : true,
            appMountId : "main",
            showErrors : true
        })
    ]

If I comment out the html-webpack-template properties (template, mobile, appMountId) I get the default webpack-html-plugin index.html and all is lovely.

The only other thing that could be off here is that at this point my entry point is an empty js file, but I don't see what that might change anything. Oh, and here's the compilation output:

webpack --progress --colours
Hash: 1985222cbfc9235e1482  
Version: webpack 1.12.11
Time: 1433ms
     Asset     Size  Chunks             Chunk Names
 bundle.js   1.4 kB       0  [emitted]  main
index.html  3.53 kB          [emitted]  
    + 1 hidden modules
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

[mrbinky3000]

I'm experiencing the same error.

    plugins: [
        new HtmlwebpackPlugin({
            template: 'node_modules/html-webpack-template/index.html',
            title: 'Kanban App',
            appMountId: 'app'
        })
    ]

and seeing

{% if (o.htmlWebpackPlugin.files.favicon) { %} {% } %} {% if (o.htmlWebpackPlugin.options.mobile) { %} {% } %} {% for (var css in o.htmlWebpackPlugin.files.css) { %} {% } %} {% if (o.htmlWebpackPlugin.options.unsupportedBrowser) { %} {% } %} {% if (o.htmlWebpackPlugin.options.appMountId) { %}
{% } %} {% if (o.htmlWebpackPlugin.options.appMountIds && o.htmlWebpackPlugin.options.appMountIds.length > 0) { %} {% for (var index in o.htmlWebpackPlugin.options.appMountIds) { %}
{% } %} {% } %} {% if (o.htmlWebpackPlugin.options.window) { %} {% } %} {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} {% } %} {% if (o.htmlWebpackPlugin.options.devServer) { %} {% } %} {% if (o.htmlWebpackPlugin.options.googleAnalytics) { %} {% } %}

[mrbinky3000]

@TomAuger HEY! I just solved it. If you are using version 2.x of html-webpack-plugin, you need to use version 3.x of html-webpack-template. I think version 3 is marked as beta so it won't install by default. You have to do the following.

npm i -D html-webpack-template@3

[jaketrent]

Just pushed v3 of the template to the latest channel. You should be able to npm i -D html-webpack-template normally again. Thanks!

[TomAuger]

Thanks @mrbinky3000 appreciate the tip! @jaketrent I'm pretty new to npm, but it appears that running just npm i -D html-webpack-template without the @3 doesn't yet pull the right version (at least, not if you had 2.5.2 installed previously).

Thanks for the great template!

[jaketrent]

jaketrent ~/dev/test-temp  $ npm info html-webpack-template

{ name: 'html-webpack-template',
  description: 'A template with more features than the default html-webpack-plugin template',
  'dist-tags': { latest: '4.0.0', beta: '3.0.2' },
...

jaketrent ~/dev/test-temp  $ npm -v
3.3.12

jaketrent ~/dev/test-temp  $ npm i html-webpack-template
/Users/jaketrent/dev/test-temp
├── UNMET PEER DEPENDENCY html-webpack-plugin@2.x
└── html-webpack-template@4.0.0

npm WARN ENOENT ENOENT: no such file or directory, open '/Users/jaketrent/dev/test-temp/package.json'
npm WARN EPEERINVALID html-webpack-template@4.0.0 requires a peer of html-webpack-plugin@2.x but none was installed.
npm WARN EPACKAGEJSON test-temp No description
npm WARN EPACKAGEJSON test-temp No repository field.
npm WARN EPACKAGEJSON test-temp No README data
npm WARN EPACKAGEJSON test-temp No license field.

jaketrent ~/dev/test-temp  $ more node_modules/html-webpack-template/package.json
{
  "_args": [
    [
      "html-webpack-template",
      "/Users/jaketrent/dev/test-temp"
    ]
  ],
  "_from": "html-webpack-template@*",
  "_id": "html-webpack-template@4.0.0",
...

There must something else going on for you @TomAuger . I'm not sure what it is. See above for my test. In my test, the lastest version, 4.0.0 was installed when running npm i html-webpack-template. Did another test to pre-install html-webpack-template@2, then npm i html-webpack-template on top of that, and it still installed 4.0.0. Please try again.