Unfortunately, I still do not understand where the bug is but I've researched it as far as I could and now am looking for help to solve it. Considering the infos I've already collected, I thought I would ask the maintainers of handlebars-loader first. If I'm wrong, please let me know where I should go with this issue.
Here is a minimal example exposing the bug: bug-handlebars.zip
Run npm install to install the dev dependencies and then npm run build && npm start to test.
You should see something like this in the console:
<link href="71660f764fdd7f9399f45b22b5c50f83.css" rel="stylesheet">My name is Bourne.
When you open the css file, you will see:
:root { content: '{{ color }}'; }
Thus far, everything works as expected.
Now to reproduce the bug, go into webpack.config.js and comment out VERSION 0 and remove the comments from VERSION 1.
Rebuild and rerun and you will again see html similar to the above in the console but if you open the css file, you will find this:
<link href="./some.css" rel="stylesheet" type="text/css">My name is .
This is the more.html file except that the variable is replaced with the empty string. Here I would expect:
:root { content: 'red'; }
Interestingly, if you then uncomment the first line in index.js that require some.css directly, rebuild, and rerun, the output is correct.
Since the webpack configuration using VERSION 0 works but VERSION 1 does not and since the difference between VERSION 0 and VERSION 1 is the use of the handlebars-loader in the css rule, my first guess is to debug handlebars-loader...but I don't know. On the other hand, requiring some.css in index.js produces the expected output, which means handlebars-loader is working correctly in this case. 🤷♂️
I hope someone can help shed some light on this. Thank you.
Unfortunately, I still do not understand where the bug is but I've researched it as far as I could and now am looking for help to solve it. Considering the infos I've already collected, I thought I would ask the maintainers of handlebars-loader first. If I'm wrong, please let me know where I should go with this issue.
Here is a minimal example exposing the bug: bug-handlebars.zip
Run
npm installto install the dev dependencies and thennpm run build && npm startto test.You should see something like this in the console:
<link href="71660f764fdd7f9399f45b22b5c50f83.css" rel="stylesheet">My name is Bourne.When you open the css file, you will see:
:root { content: '{{ color }}'; }Thus far, everything works as expected.
Now to reproduce the bug, go into webpack.config.js and comment out VERSION 0 and remove the comments from VERSION 1.
Rebuild and rerun and you will again see html similar to the above in the console but if you open the css file, you will find this:
<link href="./some.css" rel="stylesheet" type="text/css">My name is .This is the more.html file except that the variable is replaced with the empty string. Here I would expect:
:root { content: 'red'; }Interestingly, if you then uncomment the first line in index.js that require some.css directly, rebuild, and rerun, the output is correct.
Since the webpack configuration using VERSION 0 works but VERSION 1 does not and since the difference between VERSION 0 and VERSION 1 is the use of the handlebars-loader in the css rule, my first guess is to debug handlebars-loader...but I don't know. On the other hand, requiring some.css in index.js produces the expected output, which means handlebars-loader is working correctly in this case. 🤷♂️
I hope someone can help shed some light on this. Thank you.