Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Conflicts with htmlWebpackPlugin in building process when using template literals #126

Open
evanryuu opened this issue Feb 19, 2023 · 1 comment
Open

Conflicts with htmlWebpackPlugin in building process when using template literals #126

evanryuu opened this issue Feb 19, 2023 · 1 comment

Comments

@evanryuu
Copy link

evanryuu commented Feb 19, 2023 •
edited
Loading

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
Copy link
Author

evanryuu commented Feb 19, 2023 •
edited
Loading

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 using es6 template string break the html file build jantimon/html-webpack-plugin#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 evanryuu mentioned this issue Feb 19, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@evanryuu