Parcel 2 hot reload "duplicates page"

#1

I start parcel using parcel dev/index.html and then run spago build --watch to rebuild my purs files as soon as they change and then see the result directly in the browser.

This has worked just fine with parcel v1. But with v2, whenever I change something, the new version of the page is basically appended to the existing page, as such:

|-------------------|
|     old page      |
|                   |
|-------------------|
|-------------------|
|    new version    |
|                   |
|-------------------|

does anyone have the same problem? I went though real-world-halogen to check if my code and spago/parcel commands somehow differ, but they don’t.

#2

I’m using it with Halogen and I did not notice this.

I’m not using spago build --watch though - for development I use a .js file with parcel that references the output/main directly and I rely on the language-server / VS.code to update those whenever I save.

How do you generate the DOM for you project? Maybe you just create/add elements on the fly in this case this could be expected to happen.
I think there is some kind of hook for the hot-reloading in parcel/js you could probably use to reset the DOM for you if you like.

#3

FWIW, this is what I was using in an old Parcel build, which killed the app and then removed the old element

// index.js
let app

function main() {
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "staging") {
    // handle zephyr
    app = require("./dce-output/App.Main/index.js").main()
  } else {
    app = require("./output/App.Main/index.js").main()
  }
}

if (module.hot) {
  module.hot.accept(function() {
    app != null && typeof app.kill === "function" && app.kill()
    Array.prototype.forEach.call(
      document.querySelectorAll("#demo>div"),
      function(d) { d.remove() },
    )
    main()
  })
}

main()
1 Like
#4

Yes, I actually just switched to spago build --watch temporarily since I thought my editor was the culprit here. Usually, I let emacs rebuild the .purs files directly on save (using psc-ide) and then let parcel detect the change and reload the page. This is now broken, however.

Regarding the DOM, I’m using halogen to manage that, and did absolutely nothing to explicitly change the DOM or integrate parcel into my code.

#5

This might work for me as well. So #demo>div is just your “root” div element for the application?

#6

@plato #demo was the element mounted to, and div was my top-level container element for the Halogen render. Removing the mount element would mean it couldn’t be remounted.

2 Likes
#7

Excellent, I used your code and now it works again, thanks!

1 Like