Html-webpack-plugin: ERROR in Template execution failed: ReferenceError: html is not defined

Created on 10 Feb 2020 · 8Comments · Source: jantimon/html-webpack-plugin

when i use template option ,i got a problem

ERROR in Template execution failed: ReferenceError: html is not defined

ERROR in   ReferenceError: html is not defined

  - template.html:95
    F:/learn/template.html:95:11

  - template.html:98 module.exports
    F:/learn/template.html:98:3

  - index.js:284
    [learn]/[html-webpack-plugin]/index.js:284:18

code :

new htmlWebpackPlugin({
      template: `./template.html`,
      title: "my-App",
    })

how can i fix it?

Source

wk989898

All 8 comments

I've been struggling with the same issue for a number of days. Any luck on finding a solution?

sparkolJezD on 23 Mar 2020

Sorry I have way to less information to help on this.

Please provide your loader config and your template

jantimon on 24 Mar 2020

template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= html-webpack-plugin.options.title %></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

loader: vue-loader
plugin: require('vue-loader/lib/plugin')

that's all

wk989898 on 24 Mar 2020

Can you please try <title><%= htmlWebpackPlugin.options.title %></title> instead?

jantimon on 24 Mar 2020

👍1

I fixed this for my case, by adding the variable to the templateParameters object

  new HtmlWebpackPlugin({
      template: './src/index.html', // Load a custom template
      templateParameters: {
        version: process.env.CI_COMMIT_ID || 'unknown-version',
        publicPath: ASSET_PATH,
        hsScriptUrl: HS_SCRIPT_URL
      },
      inject: 'body', // Inject all scripts into the body
      hash: true
    }),

and them adding rteferencing in the template.html like this:
<script type="text/javascript" src="<%=hsScriptUrl%>"></script>

sparkolJezD on 24 Mar 2020

👍1

Thanks @jantimon , I couldn't get it to display like that

sparkolJezD on 24 Mar 2020

Cool can I close this?

jantimon on 24 Mar 2020