Every other hot reload fails with browser exception

[kwesterfeld]

I am using systemjs-tools backend, which is nicely sending updates. However, after the first reload event, my application only updates on every other change. The browser always gets an exception like this when it doesn't work:

systemjs-hmr.js:12430 Error: Fetch error: 404 
  Instantiating https://localhost:8183/smc/app/main.js - bundle/components.js
  Loading https://localhost:8183/smc/app/main.js - bundle/components.js
    at system.src.js:1458
    at <anonymous>

As you can see, the app/main.js is being triggered to reload, but it is containing my application's bundled dependencies for some reason on every other change.

I have configured jspm bundling with config injection such that that my application is bundled in two parts:

• all app dependencies go in "components.js" to avoid rebundling cost of all dependencies
• all app code bundled to "dependencies.js" to trigger reload in systemjs-tools

I turned on debug for systemjs-hmr, and noticed in the browser the difference between the two events being processed:

:8183/smc/jspm_packages/npm/[email protected]/dist/systemjs-hmr.js:1796 systemjs-hmr:log dependency tree purged, reimporting entries +1ms 
Array(1)
0
:
"app/main.js - bundle/components.js"
length
:
1
__proto__
:
Array(0)
systemjs-hmr.js:1796 systemjs-hmr:log dependency tree purged, reimporting entries +1ms 
(3) ["https://localhost:8183/smc/app/main.js", "https://localhost:8183/smc/bundle/dependencies.js", "https://localhost:8183/smc/bundle/components.js"]
0
:
"https://localhost:8183/smc/app/main.js"
1
:
"https://localhost:8183/smc/bundle/dependencies.js"
2
:
"https://localhost:8183/smc/bundle/components.js"
length
:
3
__proto__
:
Array(0)

[kwesterfeld]

@alexisvincent any updates on this one?

[alexisvincent]

@kwesterfeld Not yet, sorry.

I picked up an extra major this year and my module count is at the university system maximum. Struggling to meet even those demands, and everything else is suffering at the moment. I finish the degree in just over 2 months, so I'm not going to look at anything until then.

But I'll be able to give this, and the rest of my OSS projects (systemjs-hot-reloader, systemjs-tools, systemjs-config-builder, systemjs-unpkg-loader) some much needed attention as soon as thats over.

I do have quite a few changes sitting on disk though aimed at fixing this and a number of issues in the systems-hot-reloader project. Will make everything more stable, and provide a better testing story.

[kwesterfeld]

Perfect...good luck and let me know if I can help out. This particular issue was a bit too much for me to dig into without dedicating more time than I have, but some of the others were pretty easy.

…

On Thu, Sep 14, 2017 at 11:00 AM, λex Vincent ***@***.***> wrote: @kwesterfeld <https://github.com/kwesterfeld> Not yet, sorry. I picked up an extra major this year and my module count is at the university system maximum. Struggling to meet even those demands, and everything else is suffering at the moment. I finish the degree in just over 2 months, so I'm not going to look at anything until then. But I'll be able to give this, and the rest of my OSS projects ( systemjs-hot-reloader, systemjs-tools, systemjs-config-builder, systemjs-unpkg-loader) some much needed attention as soon as thats over. I do have quite a few changes sitting on disk though aimed at fixing this and a number of issues in the systems-hot-reloader project. Will make everything more stable, and provide a better testing story. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#26 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAq8l6FslPTH_8YE_NDih7ME0S9ubYaBks5siT-HgaJpZM4Nz5TR> .

[alexisvincent]

@kwesterfeld Thanks for all your help so far. It really is appreciated.

Yeah, it's quite fundamental to the project. Essentially systemjs-hot-reloader is unusable until this gets fixed. Im surprised not more people are complaining...

[alexisvincent]

Hold on, this bug isn't what I thought it was.

[alexisvincent]

Ok, I think I understand where the problem is. I'm guessing you have "app/main.js - bundle/components.js" set as an entry in your systemjs-tools config? systemjs-tools then passes that to systemjs-hot-reloader so that you don't have to redefine that behavior. So "app/main.js - bundle/components.js" is getting passed to systemjs-hot-reloader everytime a change happens. And then SystemJS tries to load it causing an issue.

You need to just have app/main.js as a logical entry. It's an array so that you can have lazy loaded app entry places.

You also don't need to use jspm to bundle... Just use systemjs-tools with the watch flag. The entries should be cached. I know it takes long when source mappings are there, since those aren't nicely cached by systemjs-builder.

There are two things that could be done to make bundling faster. Improving the builder so that it caches source maps (better) or upgrading systemjs-tools so that it understands the bundling directives (shouldn't be hard).

Let me know if this sorts things out for you.

[alexisvincent]

In the future I want to be able to submit arbitrary build flags to the systemjs-tools and have it perform the operation on the fly. Actually this would completely solve the issue...

If we have an option to generate arbitrary dependencies instead of just dependencies.js, then you can replace the entry in the config with a url to systems-tools and this whole thing will work automatically...

[kwesterfeld]

Your suggestion does fix this hot reloader issue. I think I put the bundle arithmetic in there because the first build time without it is about 30s for my app. The app is a SPA that weighs in around 7MB uncompressed. Subsequent forced page refresh after a change is about 6s, which I can live with. I think these numbers are about half if I put the arithmetic back in. Thanks....the flags to systemjs tools makes lots of sense. Basically I want to split my app into "vendor" and "app", where "vendor" is not subject to HMR watching nor rebuild support. That bundle would be built beforehand and simply mapped in using the jspm inject functionality I currently use. Of course, these handstands are there simply to avoid the wait of a rebuild. If that could be mitigated and automated, all the better.

…

On Thu, Sep 14, 2017 at 12:09 PM, λex Vincent ***@***.***> wrote: In the future I want to be able to submit arbitrary build flags to the systemjs-tools and have it perform the operation on the fly. Actually this would completely solve the issue... If we have an option to generate arbitrary dependencies instead of just dependencies.js, then you can replace the entry in the config with a url to systems-tools and this whole thing will work automatically... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#26 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAq8l9cokGe3kM_wuXyS_nwsTBlfmuBEks5siU_DgaJpZM4Nz5TR> .

[alexisvincent]

@kwesterfeld Do you have the systemjs-tools cache enabled? Should make loading 6s always, even after a restart of the process. Crazy large size though... I understand why theres a wait.

Got you for the vendor thing. Wanting to implement something like this automatically with analysis of module dependencies and monitoring which deps have quick release cycles.

[alexisvincent]

Also planning on switching to static file serving that works for dev and production, which will mean you won't pay the cost of bundling more then you need to.

The preemptive bundling feature will also make your life nicer one I've added the required changes to the builder project.

See

• Cancelable builds systemjs/builder#762
• Caching for SourceMaps systemjs/builder#759

[kwesterfeld]

As a follow up, is there any way to rename the "dependencies.js" hardcoded flie trigger with config? I couldn't figure this out. Basically I have to create a "dev" systemjs mapping that maps to this .js bundle name.

…

On Thu, Sep 14, 2017 at 12:33 PM, λex Vincent ***@***.***> wrote: Also planning on switching to static file serving that works for dev and production, which will mean you won't pay the cost of bundling more then you need to. The preemptive bundling feature will also make your life nicer one I've added the required changes to the builder project. See - systemjs/builder#762 <systemjs/builder#762> - systemjs/builder#759 <systemjs/builder#759> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#26 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAq8l7w-xTVci--PIZYZmHNULzwxhDdnks5siVVOgaJpZM4Nz5TR> .

[alexisvincent]

@kwesterfeld You can add an option that specifies the bundle trigger.

https://github.com/alexisvincent/systemjs-tools/blob/master/lib/handlers.js#L22

But what I want to do is actually be able to intercept arbitrary bundle arithmetic (like what is passed to systemjs-builder) and then just do that.

Note you can also provide your own handlers to systemjs-tools that does arbitrary logic. I provide a number of handlers that you can use to make your ones. By default it uses the default handler. Check that out if you want to see how its done