Hot reload not working on html file changes

[moritzlaube]

🐛 bug report

I am using Parcel V2 together with Eleventy. I've set up the pipeline so that Eleventy processes the files and saves them to a ./tmp folder which in return is watched by Parcel. Parcel then processes those files and serves them from the default dist folder.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "my app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
  "scripts": {
    "start": "run-p clean dev:*",
    "dev:site": "npx @11ty/eleventy --watch",
    "dev:assets": "parcel './tmp/**/*.html'",
    "build": "run-s clean build:*",
    "build:assets": "parcel build './tmp/**/*.html' --no-source-maps --no-cache",
    "build:site": "npx @11ty/eleventy",
    "clean": "rm -rf ./dist && rm -rf ./tmp && rm -rf ./.parcel-cache"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "@parcel/transformer-sass": "^2.0.0-beta.2",
    "npm-run-all": "^4.1.5",
    "parcel": "^2.0.0-beta.2",
    "sass": "^1.32.11"
  }
}

🤔 Expected Behavior

I am expecting the Parcel server to hot reload all the assets (css, js and html) if I am not mistaken.

😯 Current Behavior

Hot reloading works for everything related to CSS and JS. But when I am applying changes to the HTML, I have to manually reload the site.

I tried to add the following script to my index.js. But with no success regarding the HTML reloading.

if (module.hot) {
  module.hot.accept();
}

On top of that I am experiencing a 404 error when using npm start. Only when I delete the .parcel-cache folder the 404 error is gone. Also, I sometimes can't kill the Node process in the terminal. The only way to stop is to close the Terminal altogether (Mac terminal as well as VSCode terminal)

I am also seeing a sourceMap error in the console. But I am not sure if that's related.

DevTools failed to load SourceMap: Could not parse content for http://localhost:1234/index.7a2de06e.js.map: Unexpected token < in JSON at position 0

💁 Possible Solution

🔦 Context

I am trying to simplify my dev experience. Other than that, everything works fine.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.2
Node	v15.0.1
npm	7.11.0
Operating System	macOS 11.2.3

[mischnic]

I am also seeing a sourceMap error in the console. But I am not sure if that's related.

That is already fixed in the parcel@nightly version

[moritzlaube]

Thanks for your quick reaction! I just tried the nightly version. But there seems to be a conflict with the sass module. When executing my npm startscript the build fails with the following message:

🚨 Build failed.
Error: ENOENT: no such file or directory, open '/Users/moritzlaube/Projekte/xrechnung-app-marketing/node_modules/@parcel/bundler-default/node_modules/@parcel/plugin/lib/PluginAPI.js'

I already tried to uninstall sass and @parcel/transformer-sass. But even with Parcel's autoinstall I get the same error.

[mischnic]

Have you also tried deleting node_modules and rerunning npm?

[moritzlaube]

I tried npm ci. But deleting the node_modulesfolder seemed to get the nightly build to work and the SourceMap error is silenced. Yet, the changing the html still doesn't trigger a page reload and I have to do that manually. Thanks so much for your time to help out. Cheers

[billyzduke]

The behavior I've noticed is similar: javascript changes cause the entire page to refresh, scss changes will (usually) refresh in browser without reloading the entire page, and for HTML changes the page must be manually refreshed. However, the hot reload fails on any one of these fairly regularly, and far more often than I'd prefer (usually at least several times per day), I have to delete the parcel cache and rebuild from scratch.

As a perhaps-notable addendum: yesterday I was experiencing a profound reduction in speed on all page loads and reloads, which appeared at first to be a failure of the hot-reload server and/or Parcel in general, but it turns out my browser was just hanging while trying to retrieve a single externally hosted font that was being @imported into my scss (presumably either no longer available on its host site, or my access to it had been cut off by the host due to the sheer number of reloads that I must have triggered while developing since having originally included it).

[vdtrung]

Maybe you're using WSL2, I don't know but I have the same issue then I change back to use WSL1, and it's worked.

To see what WSL version are you on (open PowerShell by admin):
wsl --list --verbose - if you're in version 2 then try to go back version 1 by wsl --set-version <distribution name> 1

[devongovett]

I think this should be fixed as of #6567 in the latest nightly. If multiple files change at the same time and only some of them call module.hot.accept(), we reload the page.