HMR with multiple unrelated builds in the same project not working.

[nicolasdelfino]

🐛 bug report and 🙋 feature request?

🤔 Expected Behavior

HMR should work when doing multiple builds with different entry files in the same project.

😯 Current Behavior

Building foo and bar works fine, problem is that HMR doesn't work if I run build
(creating dist/foo and dist/bar) and then start a watch on either foo or bar.

Tried adding cli options like hmr-port / hostname but nothing seems to do the trick.

HMR works if either foo or bar exists underneath dist folder but not when they exist at the same time. It does rebuild: a refresh shows that foo or bar have been changed.

🔦 Context

Trying to make a setup that deals with two completely unrelated modules:
{
"scripts": {
"dev:foo": "parcel watch foo/entry1.js -d wwwroot/dist/foo",
"dev:bar": "parcel watch bar/entry2.js -d wwwroot/dist/bar",
"build": "npm run build:foo && npm run build:bar",
"build:foo": "parcel build foo/entry1.js -d wwwroot/dist/foo",
"build:bar": "parcel build bar/entry2.js -d wwwroot/dist/bar",
}
}

Single index html:

<script src="dist/foo.js></script> <script src="dist/bar.js></script>

🌍 Your Environment

Software	Version(s)
Parcel	1.7.1
Node	8.4.0
npm/Yarn	5.5.1
Operating System	macOS

[DeMoorJasper]

This should work

_{Sent with GitHawk}

[nicolasdelfino]

@DeMoorJasper ok then I must be doing something wrong which is good, I made a repo to demo what I mean: https:/nicolasdelfino/parcel1219

Running dev:foo in the repo doesn't work hmr-wise, a refresh shows edits made to foo/index.js

[DeMoorJasper]

This piece of code is causing your issue, more specifically the parent check.

var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
  var hostname = 'localhost' || location.hostname;
  var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
  var ws = new WebSocket(protocol + '://' + hostname + ':' + '59076' + '/');

This is due to parcel only wanting the first bundle to be responsible for HMR, so that we don't update for every bundle seperately.
This should only be an issue if you run them parallel, and you can always switch around the order, basically the first bundle gets to be responsible for the hmr.

This might intrest you, as it probably fixes this issue: #1119

[nicolasdelfino]

This might interest you, as it probably fixes this issue: #1119

Great, I´ll keep an eye of how that goes!

This should only be an issue if you run them parallel, and you can always switch around the order, basically the first bundle gets to be responsible for the hmr.

In my particular project, there's a need to run through and build everything at first before working on its separate parts. E.g full build builds derp1/2/3, then dev:derp should hmr watch derp1 - and that is what is failing: running watch on a js file included by index.html that also includes and loads other parcel bundled (parcel build **) js files.

you can always switch around the order

Is there an example of how in your docs?

edit: should say that the index.html is not the parcel target, each npm script targets the individual js-files.

[DeMoorJasper]

@nicolaisueper Your best bet is to either use the multiple entrypoints branch or wait untill it gets released for this to get fixed.

And what I meant is the first bundle that gets loaded will be responsible for hmr and as that one doesn't know about the other parcel process it only updates the first bundle through hmr. If you put the non watched bundle second than it should work fine.

[nicolasdelfino]

@DeMoorJasper Alright cool now I get what you mean about the order, will do it that way until #1119 gets merged.

Thanks for the help!

[DeMoorJasper]

I'll close this as you can track progress on the multiple entrypoint PR