Duplicate sources in the DevTools after HMR

[ashubham]

After HMR of a module, it starts appearing multiple times in the Source directory, and it becomes really difficult to debug and find the correct one.

This makes HMR more gimmicky rather than being useful as a developer naturally would want to put breakpoints on the code.

Since, things are now unbundled reloads are painfully slow (~30s) in our case, so seems the bundled in Dev setup with reloads was better after all.

Thoughts ?

[FredKSchott]

Very surprised to hear that unbundled reloads are slow, Snowpack shouldn't be rebuilding any files across reloads (unless one changed) so I'm not sure what work Snowpack would even be doing that would take 30s. Can you share a stack trace (or a screenshot of your devtools network tab) where you're seeing this on reload?

[FredKSchott]

@ashubham interesting, and you can't run Snowpack's dev server on your local machine? It's definitely designed for either local development or HTTP/2 where those files can all stream down together.

[ashubham]

No we are using https://www.snowpack.dev/#dev-request-proxy to proxy APIs to a backend. This makes snowpack fallback to Http1.1 due to this #536

[ashubham]

Please consider using something which support HTTP2 proxying instead of http-proxy which does not seem to.

[FredKSchott]

If you know of a good library that supports this, I'm game to investigate.

I'm still surprised that you're seeing 30 second load times, are you also loading your JavaScript files over a proxy as well? If your site resources are loading from localhost then they should load very fast even over HTTP 1.

[ashubham]

Here is a partial snapshot of my load waterfall:

Since HTTP1 is limited to 6 resources at a time, it has this long queue of requests.

Also, what about this for Http2-proxy module, I havent used this personally:
https://github.com/nxtedition/node-http2-proxy

[ashubham]

@FredKSchott Do you have any thoughts on this ? This currently makes our dev setup painful to use.

[FredKSchott]

For the duplicate sources issue in DevTools, yea that's unfortunately a product of how ESM HMR works. Until the browser supplies hooks to replace modules in your application, you need to load the file as a new module like this.

When you need to debug a file like this, you can run the dev server with --no-hmr.
Or, you can reload the page manually to have your new code run on the original file name.

Fwiw bundlers also have trouble with this in HMR, since at the end of the day you are loading new lines of code into the application.