windicss-webpack-plugin icon indicating copy to clipboard operation
windicss-webpack-plugin copied to clipboard

Published 20 hours ago • verified publisher icon windicss

Conflicts with htmlWebpackPlugin in building process when using template literals

Open evanryuu opened this issue 2 years ago • 1 comments

Describe the bug This plugin overrides some of the htmlWebpackPlugin options. This may lead to an error when building if you use the es6 syntax ${} .

e.g.

<!-- template html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
...
  <script>
    const str = 'world';
    const data = `hello ${str}`
  </script>
...
</body>
</html>

To Reproduce My Node.js version is set to 18.12.0. I think >= 14.18.0 can also reproduce the problem.

Steps to reproduce the behavior:

  1. Clone or download .zip file from repository https://github.com/evankwolf/windicss-webpack-example
  2. Run npm install then npm run build
  3. See error below errors
ERROR in Template execution failed: ReferenceError: str is not defined

ERROR in   ReferenceError: str is not defined

  - index.html:11
    G:/Project/others/windicss-webpack-example-master/public/index.html:11:10

  - index.html:14 module.exports
    G:/Project/others/windicss-webpack-example-master/public/index.html:14:3

  - index.js:450
    [windicss-webpack-example-master]/[html-webpack-plugin]/index.js:450:16

  - task_queues:95 process.processTicksAndRejections
    node:internal/process/task_queues:95:5

  - async Promise.all

Expected behavior Build successfully

Screenshots image

evanryuu avatar Feb 19 '23 04:02 evanryuu

Currently, I have found 2 ways to solve this problem:

  1. Change the HTML template from .html to template .ejs.
  2. Make a tiny change within loaders/windicss-template. You can also find the relevant discussion here https://github.com/jantimon/html-webpack-plugin/issues/950

I have created a pull request linked to the issue. This is my first time raising an issue and pull request. If there's anything wrong please let me know😂

evanryuu avatar Feb 19 '23 04:02 evanryuu