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?
I debugged this, and here's a quick description of what currently happens in Parcel HMR with this example:
main.js the first time, and it dynamically imports and loads faqs.js.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..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()
})
}