Saving js file does not cause browser to reload

[elgs]

Software	Version(s)
Parcel	1.6.2
Node	v9.6.1
npm	5.6.0
Operating System	Linux archlinux 4.15.5-1-ARCH #1 SMP PREEMPT Thu Feb 22 22:15:20 UTC 2018 x86_64 GNU/Linux

I have a couple of html, js and scss file managed by parcel. The only problem is that when the js files got saved, the watch process doesn't reload the browser. I can confirm that when the html, scss file got saved, the browser got reloaded as expected. I also observed that when js files got saved, the changes had been propagated to the browser via the websocket connection, this can be confirmed by looking at the websocket frames in the Chrome dev tools. Wondering if this happens to everyone or only me.

[DeMoorJasper]

That’s not supposed to happen,could u provide us with some code as this might be the problem.

_{Sent with GitHawk}

[elgs]

I have some further observation. What I'm working on is a jQuery plugin project. Let's talk about two projects and two situations one by one:

Project A (PA): A simplified one html one js project; Project B (PB): My real project with a few dozens of js files;

Situation A (SA): toggle commenting the console.log at the top of the js file; Situation B (SB): toggle commenting the console.log inside the jQuery plugin callback;

PA-SA: Always reloads as expected;

PA-SB: Only once not reloading, otherwise reloads as expected;

PB-SA: Always reloads as expected;

PB-SB: Never reloads.

It looks like it has something to do with which part of the js file got changed. Also I found when the browser doesn't reload, the update notification actually is sent via the websocket to the browser.

console.log('toggling commenting this line always causes browser to reload');
$(function () {
    $.fn.test = function (options) {
        const settings = $.extend({}, options);
        return this.each(function () {
            const $this = $(this);
            const self = this;
            console.log('toggling commenting this line cannot relaibaly cause browser to reload, though browser has received the websocket update');
        });
    };
});

[elgs]

Not sure if any chance to take a look at this issue? I have been using parcel for about a month, and I need to manually reload the browser each time I save the js file. For html, scss files, I don't need to.

[Bbahri]

I have the same problem using React and Intellij IDE with Parcel. I start parcel, then i edit a component and the component updates in the browser. But it just works 1, 2 or 3 times and then it doesn't work anymore.

[ashbeats]

@Bbahri

I had a similar issue, but was I'm using Windows 10 and PHPStorm as the IDE. HMR worked for maybe a couple of times, and stopped detecting changes.

However, I noticed that when I used Notepad++ Parcel picked up the changes fine.

So for any of you who are using PHPStorm, WebStorm, IntelliJ or any other Jetbrains IDE that uses an auto-save feature called "Safe write".

If safe-write is selected, a changed file is first saved in a temporary file. If the save operation succeeds, the file being saved is replaced with the saved file. The original file is deleted and the temporary file is renamed. Also, the ownership of such file changes.

And Parcel <= 1.9.7 does not detect that for now.

So in the meantime, disable safe-write.

Other IDE's have similar option, but they may be named differently. See https://stackoverflow.com/questions/44819838/how-to-disable-safe-write-in-visual-studio-code

[DeMoorJasper]

There is actually a pretty extended note on safewrite in the docs. https://en.parceljs.org/hmr.html#safe-write

Not sure what else we can do to make this even more clear

[elgs]

@DeMoorJasper in the Safe Write section of the doc, it writes like this:

When using Hot Module Reload (HMR) this feature blocks the automatic detection of file updates

In my situation, the change of the js file was detected, this can be proved by watching the websocket frames in Chrome dev tools. But I have to manually click the reload button on the browser to make the change of the js file effective. However, for html files, I don't need to reload the browser. This happened when I used vscode and vim. In vim, :set backupcopy=yes doesn't help.

Update: I just had some further test of the :set backupcopy=yes in vim. It caused the parcel webserver to completely lose track of the js file. Reloading the browser wouldn't load the change of the js file after :set backupcopy=yes and :x. I had to restart the parcel webserver.

[DeMoorJasper]

@elgs my comment was more aimed towards the comment explaining safe write, not sure what issue you're having.

Might just be improper HMR handling on the JS side (in your code), could be something else.

[DeMoorJasper]

Perhaps you could try with this in your entrypoint:

if (module.hot) {
  module.hot.accept(function () {
    window.location.reload();
  });
}

[elgs]

@DeMoorJasper your code snippet solved my problem! Thank you!

The reason I made the comment was that my feeling was that this problem might not be due to the safe write. Because safe write blocks the detection of file change. The problem happened after the file change had been successfully detected.

This problem doesn't really bother me because a manual reload is not the end of the world, but with the if module dot hot code, my life is a lot easier. Thank you.

Some side note: The current version (1.9.7) is a pretty good version for my project. Back then I guess when it was in 1.8.x or even 1.7.x, it always hung when I built my project. My project is a project with about 20 modules with up to 4 levels of import relationships. And it seemed to be random where it hung. This version, on the other hand, still hangs sometimes, but if I press ctrl+c on my keyboard and build again, it almost always finishes the building process and I always get the expected built js file.

[DeMoorJasper]

@elgs the project has come a long way, we are still constantly discovering new things where parcel hangs or has issues with and are trying to solve them all sooner or later. Some are design issues (Soon to be resolved by Parcel 2, mainly ram and scaling issues). Most of the issues that aren't design related are issues with libraries we use like Chokidar or Node-Sass these caused hanging issues, chokidar should be fixed as it now gets put into a worker, and in the next release node-sass should also be fixed as we changed to dart-sass.

There might be other places, libraries and ofcourse also Parcel code that can cause hanging. I'm pretty positive that by the time Parcel 2 gets out, Parcel will rarely ever hang on any project.

[DeMoorJasper]

Gonna close this as it has been resolved.

Feel free to open any new issues for the hanging issues you mentioned

[fitfab]

Btw — I had the same issue with hot-reload. So I have file index.tsx that do an ‘Import App from “./App”’, but my file name “app.tsx” lower case. When I fixed the import to lowercase everything worked.

[ehmkah]

@DeMoorJasper - Is there a plan to build a feature for parcel which allows parcel to handle the "save-write"-feature from different IDEs?

[PhenX]

I have the same issue on Visual Studio 15.8, and no way to disable the "safe write" feature (if any). So for now I'm running a build on each change, or using Notepad++ to edit my files.

[esausilva]

This is a bummer. I'm running into this issue also using Visual Studio 15.9.3. I hope it gets resolved soon.

Edit: Since I did not want to switch to Notepad++ to edit my JS/Sass files, so I ended up configuring Webpack to handle my JS and Sass files, and it works with VS "safe write".

If anyone using VS is interested, I created a Gist with the package.json and webpack.config.js files.

I also use NPM Task Runner to run the dev script when the project opens and build script before each build.