0

I set up Parcel and it's working great for hot module replacement of html files when I hit Save (I have 2 html files - index.html and snake.html). I am using SASS and SASS modules using @use.

However, it is only auto-refreshing index.html when I make a change to any of the SASS files. snake.html does not auto-refresh. Oddly, if I hit save on either index.html, snake.html or package.json after making a change to a SASS file and saving, THEN snake.html refreshes and shows the changes to the CSS.

My package.json has this:

"scripts": {
    "dev": "parcel src/index.html src/snake.html",
    "build": "parcel build src/*.html src/js/*.js src/scss/*.scss"
  },

Any idea what's going on? Thanks!

Espskully
  • 97
  • 1
  • 2
  • 10
  • 1
    I updated to Parcel 2, and everything started working fine. I returned to my machine without changing anything, and now neither html page is auto-refreshing on save. Very frustrating. – Espskully Oct 05 '21 at 03:56
  • 1
    So this may or may not be the source of the problem, but one red flag is the way you've written your `dev` and `build` scripts. Parcel is a bit different from webpack or other tools in that it traces all your app's dependencies, no matter their type (e.g. images, scss, js, other html files, etc.) from a root `.html` file by analyzing the things that it references (and the things that those things reference, etc.), rather than having you specify all the parts of your app separately in a config or command line. There may also be a bug in parcel, though - could you share a demo repo? – Andrew Stegmaier Oct 06 '21 at 15:37
  • 1
    I think I found a bug in parcel2 refresh, which might be related to what you're seeing: https://github.com/parcel-bundler/parcel/issues/7028 – Andrew Stegmaier Oct 06 '21 at 16:37
  • It looks like the maintainers responded to that bug, and there is indeed an issue with refresh in a very specific case: when you include non-module scripts (e.g. ` – Andrew Stegmaier Oct 06 '21 at 17:33
  • Thank you Andrew. On another note - you mentioned this isn't a good way to build an app...I'm currently taking the Scrimba Frontend developer path course. I'm just starting to actually build things out (in this case, the Snake game built with vanilla js, HTML and CSS). Just an HTML page that hosts the game. I'm really keen on doing things the right way. Can you elaborate on what I should do differently? Thanks! – Espskully Oct 07 '21 at 16:54
  • 1
    Glad to help! I'd recommend following the steps at Parcel's "Project Setup" page: https://parceljs.org/getting-started/webapp/ Specifically, your HTML file would reference a single root script with `type="module"`, and then that script can import everything it depends on with modern es6 module syntax statements (e.g. `import { x } from "./dependency"`), which can import what they need, etc. That way you avoid bugs that can come from unexpected global variables. Your `dev`/`build` commands would be simpler, too: `parcel src/index.html` / `parcel build src/index.html` – Andrew Stegmaier Oct 07 '21 at 17:17
  • Thanks Andrew. I'll give this a try. – Espskully Oct 08 '21 at 17:53
  • There still isn't a solution to this problem? I just started a simple project with Parcel and have multiple html files(index.html test1.html test2.html) HMR only works on index.html. – norixxx Jun 23 '22 at 08:44

0 Answers0