Html-webpack-plugin: Error in tagged template literal in script tag

Created on 14 Aug 2018  路  15Comments  路  Source: jantimon/html-webpack-plugin

Expected behaviour

Pass this code.

<!--  index.html -->
<script>
  if (window.location.hostname !== 'localhost' && window.location.protocol === 'http:') {
    window.location.href = `https://${location.host}/${location.search}`
  }
</script>

Current behaviour

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

ERROR in   ReferenceError: location is not defined


  - loader.js:4 eval
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:4:10

  - loader.js:9 module.exports
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:9:3

  - index.js:284 Promise.resolve.then
    [myapp]/[html-webpack-plugin]/index.js:284:18

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

Environment

    "webpack": "4.16.5",
    "html-webpack-plugin": "^3.2.0"

Config

        new HtmlPlugin({
          template: path.join(__dirname, "src/index.html")
        }),

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
    </head>
    <body>
    <script>
        if (window.location.hostname !== 'localhost' && window.location.protocol === 'http:') {
          window.location.href = `https://${location.host}/${location.search}`
        }
    </script>
    </body>
</html>
help wanted
Source
picture mizchi

Most helpful comment

I'm having this issue as well after running npm i html-webpack-plugin@next

picture RealWeeks on 22 Aug 2018
👍2

All 15 comments

Could you please check if this bug has already been solved in the current alpha release?

npm i html-webpack-plugin@next
jantimon picture jantimon on 14 Aug 2018

I'm having this issue as well after running npm i html-webpack-plugin@next

RealWeeks picture RealWeeks on 22 Aug 2018
👍2

Okay we should add a unit test for that 馃憤

jantimon picture jantimon on 23 Aug 2018

I'm also having this issue.

acarl005 picture acarl005 on 25 Aug 2018

looks it works when apply html-loader

HairyRabbit picture HairyRabbit on 7 Sep 2018

According to #950 this should be solved with a solution from https://github.com/lodash/lodash/issues/399#issuecomment-28775156 in this commit: https://github.com/jantimon/html-webpack-plugin/commit/e570fb473391c3bf6235a9921f9d27ef1aae509b

Unfortunately that didn't fix the entire issue - Any ideas how we could solve it?

jantimon picture jantimon on 7 Sep 2018

yeap, the es6/erb template are all valid for lodash, but it's difficult to know which ${ ... } are users want :). I think disable the es6 delimiter is the easy way.

HairyRabbit picture HairyRabbit on 11 Sep 2018

@HairyRabbit how can we disable the es6 delimiter in addition to https://github.com/jantimon/html-webpack-plugin/commit/e570fb473391c3bf6235a9921f9d27ef1aae509b ?

jantimon picture jantimon on 11 Sep 2018

Definitely a problem for me.

My template is in fact a Thymeleaf template, and contains snippets similar to below that need to stay untouched:

<html lang="en" xmlns:th="http://www.thymeleaf.org" th:lang="${#locale}">

I am using lodash to inject chunk filenames into the template.

Lodash, unfortunately, doesn鈥檛 provide an opportunity to escape ES template literal delimiter directly in template and only allows to replace said delimiter with custom RegExp using _.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

@jantimon, is there a way to issue that command immediately before my template is compiled? Or should I move to, say, Handlebars? (Although, I dare not think what kind of delimiter collisions I鈥檓 going to encounter there.)

EDIT:
I have fixed it by replicating commit https://github.com/jantimon/html-webpack-plugin/commit/e570fb473391c3bf6235a9921f9d27ef1aae509b, but that fix is still not in tagged version. Would it be possible to publish it?

no-simpler picture no-simpler on 18 Oct 2018

Do you mean this code?

https://github.com/jantimon/html-webpack-plugin/blob/55e86ba3941b66da14ea33d60f1dda058cf6b66a/lib/loader.js#L26

It is part of the current beta.

What we might do is to do an additional replace here:

https://github.com/jantimon/html-webpack-plugin/blob/55e86ba3941b66da14ea33d60f1dda058cf6b66a/lib/loader.js#L31

To escape backticks

jantimon picture jantimon on 19 Oct 2018

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.

stale[bot] picture stale[bot] on 17 Apr 2019

@jantimon same issue when using ES6 template in html.

I know it has been fixed in 4.x version, but In my team's projects are still in 3.x version. And wrote some plugins for team's need using the 3.x hooks API.

can I fix this issue by extending htmlPlugin3.x with hooks?

funkyLover picture funkyLover on 23 Apr 2019

@funkyLover you can fix this by changing to another loader like this:

 new HtmlPlugin({
          template: '!!' + require.resolve('./custom-loader') + '!' + path.join(__dirname, "src/index.html")
        }),
jantimon picture jantimon on 24 Apr 2019

@jantimon thanks!

just copy the default loader, and update config like template: '!!' + require.resolve('./loader') + '!' + template fix the problem.

funkyLover picture funkyLover on 27 Apr 2019
🎉1

Cool 馃憤

jantimon picture jantimon on 4 May 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mmjamal picture mmjamal  路  3Comments
lcxfs1991 picture lcxfs1991  路  4Comments
azat-io picture azat-io  路  4Comments
lonelydatum picture lonelydatum  路  3Comments
ghaiklor picture ghaiklor  路  3Comments