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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 19
Comments: 15 (3 by maintainers)

Most upvoted comments

I am still seeing HTML not be reloaded whether i have a script or not. I assume this shouldn’t be the case?

Me too. JS reloads happen from my entry file, but if I modify the index.html file the page does NOT reload. Parcel v2.

joelhickok on Jul 17, 2021

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 Mar 5, 2018

💁 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 Dec 3, 2019

Using pug with a conditional empty javascript file also works

doctype html
html
  head
    meta(chrset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(http-equiv='X-UA-Compatible' content='ie=edge')
    link(rel='stylesheet', href='./style.scss')
    if process.env.NODE_ENV === 'development'
      // just to make HMR work
      script(type='module', src='./index.js')
    title Page title
  body

cstuncsik on Dec 20, 2021

I am still seeing HTML not be reloaded whether i have a script or not. I assume this shouldn’t be the case?

WickyNilliams on May 20, 2021

Interested by this feature.

kud on Jun 29, 2020

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 May 22, 2020