HMR with Parcel.js within dynamic imports

Question

I have a simple Parcel.js 2.0 set up with a main.js file as the starting point:

import('./components/faqs/faqs.js').then(function(Faqs){

  Faqs.init()  

})

When running parcel watch - I have found that changes to the main.js file HMR as expected, but changes to the linked faqs.js within the init function do not, and require a page refresh.

If I take a synchronous approach such as:

import init from'./components/faqs/faqs.js'

init()  

Then HMR works as intended, refreshing with any changes to the faqs.js. Is this an expected behaviour of Parcel's HMR?

Answer 1

I debugged this, and here's a quick description of what currently happens in Parcel HMR with this example:

1. You load main.js the first time, and it dynamically imports and loads faqs.js.
2. You make a change to faqs.js, parcel sends a websocket message to the browser, informing it that the bundle beginning with faqs.js needs to be re-loaded. The updated bundle code is downloaded and executed, including a new definition for the init() function. Any global side-effects in faqs.js will also be re-run. So far, so good.
3. However, probably what you're expecting is that the .then callback from main.js that actually runs the init function also re-runs. This doesn't happen because parcel treats the different dynamic bundles independently.

IMO, this seems like a bit of a rough edge of the current implementation of HMR in Parcel2 - I'll file a bug with what I've found so that we can think about possibly improving this.

In the meantime, however, you can work around the problem yourself by providing a callback to module.hot.accept, which will be injected by parcel in development mode (see documentation). For example, you could add this to faqs.js:

// "module.hot" is injected by parcel in development mode.
// This check will ensure that this code _only_ runs in this context
// (e.g. it won't affect production)
if (module.hot) {
   // The callback provided to "module.hot.accept" will be run whenever
   // parcel sends a new version of `faqs.js` to the browser in development.
   module.hot.accept(() => {
      // Actually run the new version of your init function.
      init()
   })
}