We Keep Coding

Webpack chunks are not reloaded on deploy

I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2

What am I doing wrong with Angular js manual bootstrap process?

I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.

I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too

Javascript files not loading consistently?

We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.

If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".

JavaScript function not working due to cached JS file

I have a few JS files which I need on every page in my admin panel, like: functions.js, login.js, ...
I combine all those files (and minify them) into one file using gulp: admin.js
Two days ago, I have made a new function called "changeTicketStatus", but there's one problem: cache.
Whenever someone visits my website, the new function does not work yet.
When they visit http://website/js/admin.js manually in the browser, they do see the new function.
When they check via sources (in chrome dev tools), they do not see the function.
Since we are using CloudFlare for caching, I thought this might be the problem, but we already purged all cache on CF and it is still not working.
The people who are trying to visit my website have already cleared their cache too. It does work in private mode (incognito), so I guess it should be something cache related... I just think it's really weird that even after clearing their cache, the function's still not appearing in dev tools.
I would really appreciate it if someone could help me. I'm out of ideas, I really don't know how to fix this.
Kenny

Can you add a random querystring to end of include script
for example:
instead of <script src="app.js"></script>
use this <script src="app.js?v234123"></script>
This will solve your problem about caching.

heroku messing up image formatting

i am having trouble with heroku messing up my image formatting. i don't get any image problems in my localhost development.
so if you visit novulty.herokuapp.com/services and scroll to the 'our results' section, you'll see that some of the logos are wrongly formatted. if you keep refreshing the page, you'll see different logos get wrongly formatted. i am really not sure what the case is.
i've tried precompiling my assets (rake assets:precompile) but that doesn't seem to be do the trick. next, i thought it was an issue of loading my javascript later as opposed to earlier in the file, but if i load it in the beginning (in the <head>) the javascript doesn't even work... so i am very confused.
feel free to take a look at my code at https://github.com/sambaek/novulty
could anyone help me? thanks!
UPDATE:
this problem is happening on localhost. a lot less often though. i wonder if it's a javascript/css issue or rails/heroku one?

It's likely your issue has to do with running in Production versus Development, and the order in which your assets are being read. In development, the order works, but in Production, where your css and javascript is likely all concatenated into single files, you might be overriding classes and having other conflicts.
To test this theory, just run locally your app in production. I don't do this often, but the commands are likely
RAILS_ENV=production rake assets:precomiple
RAILS_ENV=production rails s
Assuming that you'll see the same errors, you might next figuring out if its your CSS or javascript. Inspect your images and make sure the classes and attributes are as you expect. Check for overwritten classes.
Lastly, if still an issue, I'd focus on your javascript. Remember that if you put it into multiple js files, they'll all be combined into 'application.js', assuming you are using the default setup. If you have a developer mode on your browser (I use Chrome), check the javascript inspector to see for any errors.