HMR not working (Parcel, Webpack 5) in WSL2/Ubuntu 22.04

Question

HMR is not working under WSL2.

It's not reloading. I have a pretty normal setup of sass and parceljs. The problem is that, when I make a change in a sass file, it doesn't reload. It doesn't recompile, and so the changes aren't visible even if I refresh the page or even close the server (http:localhost:1234) and run it again through npm run dev.

It is working just fine in Git Bash or PowerShell, but it is not working in WSL2/Zsh.

This is my package.json:

{
  "name": "course-sass-basics-start",
  "version": "1.0.0",
  "description": "## Introduction We can use either plugin to convert our SASS files to CSS     or we can use module bundlers like webpack or rollup to convert our SASS files to CSS and this is more easy to use.",
  "source": ".src/index.html",
  "scripts": {
    "dev": "parcel ./src/index.html && parcel watch ./src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.6.2",
    "parcel": "^2.6.2"
  }
}

If I delete dist and .parcel-cache and try again it still doesn't work.

However, when I switch to Git Bash or PowerShell, HMR starts working (after npm i).

I even added the type module under script tag in my index.html.

It feels like WSL is doing things very slowly compared to the same tasks in Windows.

Additional info: I am not using docker, just running on a simple Zsh/WSL command line.

Answer 1

[I]t is working just fine in Git Bash or PowerShell, but it is not working in WSL/Zsh.

This may indicate the core problem. It sounds like you have the project on a Windows drive, such as C:. This would be referenced under WSL as /mnt/c/path/to/project.

If that's the case, then you'll face two issues (both of which you are having):

• File access will be very slow - For details see my related answer regarding slow npm/yarn performance.

• Hot reload functionality won't work since there is no inotify support in WSL2 for Windows drives. For details see another of my related answers regarding hot reload in nodemon. It's also come up for React, Tailwind, and others here on Stack Overflow.

As mentioned in those other answers, there are usually two options. However, since you are running Ubuntu 22.04, one of those is unlikely to work at the moment:

• First, it's always recommended to use the native filesystem under WSL2. Placing your project files in something like ~/src or ~/projects would suffice. This will improve performance drastically, as well as allow inotify (reload) functionality to work.

• Second, under most distributions, you can likely use WSL1, assuming you don't need any particular feature of WSL2's kernel. WSL1 has a fairly high level of compatibility with Linux (somewhere in the 99%+ range for many developer tools and frameworks), but also has better performance with Windows drives as well as inotify support there.

  However, WSL1 is starting to show its age a bit, and some changes in Ubuntu 22.04 break things quite a bit more on WSL1. A change in gzip (which other distributions will probably pick up soon if they haven't already) means that it won't run on WSL1. This leads to cascading failures in other applications that depend on gzip.

So, unless and until that is fixed in WSL, I would stick with WSL2 for Ubuntu 22.04 and use the first option of placing files on in your WSL2 filesystem.