Watching and rebuild files stops working after once or twice

🐛 bug report

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

{
  outDir: './dist',
  outFile: 'index.html',
  publicUrl: '/',
  watch: process.env.NODE_ENV !== 'production',
  cache: process.env.NODE_ENV !== 'production',
  cacheDir: '.cache',
  contentHash: false,
  minify: process.env.NODE_ENV === 'production',
  scopeHoist: false,
  target: 'browser',
  bundleNodeModules: false,
  https: true,
  logLevel: 3,
  hmr: false,
  hmrPort: 1235,
  sourceMaps: true,
  hmrHostname: '',
  detailedReport: false,
  autoInstall: true
};

🤔 Expected Behavior

When I use the watch command, I expect that the building process updates itself automatically when I modify a file.

😯 Current Behavior

This mechanism is working, but only once for each file. The first time I modify a file after having launched the watch command, it is taken into account in the rebuild, but then the next modification does not have any effect. If I modify an other file it’s working but only once. There is no message displayed when it’s not working.

I’m on Linux (Ubuntu 20.04) and I use gedit as code editor. If I use vim, I have the same behavior. But if I edit the file on the command line using echo, each modification is taken into account by the rebuild process :

echo "// this is a modification" >> src/myfile.js

💁 Possible Solution

This is due to this issue : when gedit is writing modifications to a file, it copies the new content to a new file and then delete the old one. So the link between the file and the watcher is lost after the first edition.

I was able to fix it by modifying the watch function in Bundler.js :

  async watch(path, asset) {
     if (!this.watcher) {
-      return;
     }
 
     path = await fs.realpath(path);
 
+    // force unwatch an already watched path so that inotify points to the new file
+    if (this.watchedAssets.has(path)) {
+      this.watcher.unwatch(path);
+    }
 
-    if (!this.watchedAssets.has(path)) {
      this.watcher.watch(path);
      this.watchedAssets.set(path, new Set());
-    }
    this.watchedAssets.get(path).add(asset);
  }

🔦 Context

💻 Code Sample

This bug can be reproduced with the demo example and the default configuration

parcel index.html

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	v10.19.0
npm/Yarn	6.14.8
Operating System	Ubuntu 20.04

[khantminsithu]

Any Update on this thread? I am facing the same issue. Always lose connection after refresh

[mrawshan]

The connection to the HMR server was lost after I unlocked the computer. And the changes will never show on the page. To prevent this, I used hot module replacement in my javascript file.

Simply add the below line of code into a javascript file.

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

It’s worked for me. I hope this will help