Parcel: Hot reload doesn't work for an empty HTML page without external CSS/JS imports
### 🐛 bug report
No files or configs
🤔 Expected Behavior
I have empty HTML without any external resources (such as local CSS files or JS). When I change it and save I should get an immediate update in the browser without refresh while in dev mode.
😯 Current Behavior
I change anything in the HTML file, it gets rebuilt but not refreshed automatically in the browser. I need to click refresh.
💁 Possible Solution
When I add any import. For example to the CSS external local file and then refresh the page once, all changes to HTML start to immediately displayed on saving without a need to press refresh
💻 Code Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: red">Hello world</p>
</body>
</html>
🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | latest to date
| Node | 8.9.3
| Yarn | 1.5
| Operating System | Mac OS High Sierra
RIP21
All 9 comments
There is no javascript bundle to append the HMR runtime to.
https://github.com/parcel-bundler/parcel/blob/420ed63ed18c6a09e8b25754d0142b3b87ebcd71/src/packagers/JSPackager.js#L185-L191
We would have to inject a script tag into the html file.
mischnic
on 5 Mar 2018
Glad that my bug contribution is not false positive :) Waiting for the fix ;)
RIP21
on 5 Mar 2018
Could I work on this?
vsui
on 27 May 2018
@vsui I think you could. This bug is quite annoying.
RIP21
on 27 May 2018
I'll take this on if it's still open @RIP21 @vsui.
cacheflow
on 7 Jul 2018
This sure needs to be fixed. I’m not familiar with the internals of Parcel, but I guess that to support auto reloading without JS, we’d have to:
- create a browser module including HMR runtime, and then
- inject it to the HTML.
Browsersync injects its client script after the opening <body> tag, would that be wise to do here too?
akselinurmio
on 24 Apr 2019
💁 Possible Solution
if page has no one scripts, you must automatically add reload helper script, to the beginning of the head element, like:
<head>
<script id="__parcel__helper__">
/* code */
/* code */
/* code */
// clear html from helper script tag, just in case
var helperScriptElement = document.getElementById('__parcel__helper__')
helperScriptElement.parentNode.removeChild(helperScriptElement);
</script>
<title> e.t.c. </title>
</head>
MegaJSDeveloper
on 3 Dec 2019
I finally "solved" this by adding a live.js script into the *.pug pages. It does a good job at reloading the pages--might not be as fast as Parcel's hmr, but it works.
// index.pug
if env === 'development'
script(src="https://livejs.com/live.js#html")
// pug.config.js
module.exports = {
locals: {
env: process.env.NODE_ENV
}
};
Don't forget to remove this line when building for production.
AleksueiR
on 21 May 2020
Interested by this feature.
kud
on 29 Jun 2020
Related issues
v0idifier
·
51Comments
natqe
·
40Comments
Znarkus
·
38Comments
edo-codes
·
42Comments
mattdesl
·
43Comments
Most helpful comment
There is no javascript bundle to append the HMR runtime to.
https://github.com/parcel-bundler/parcel/blob/420ed63ed18c6a09e8b25754d0142b3b87ebcd71/src/packagers/JSPackager.js#L185-L191
We would have to inject a script tag into the html file.