I'm at a loss for this issue, after implementing es6 javascript modules on my front end, firefox will sometimes get stuck on read. Its inconsistent, sometimes its reading the site other times its reading bootstrap or some other url. I found a post online that resembles what's happening too me but the solution doesn't help (https://support.mozilla.org/gl/questions/1256559). As far as I can tell it has to do with caching, the site will never fail to load completely if it fetches all resources from the server, however if it fetches from cache it will often parse and load the page, but hang when running some javascript.

Perhaps I am doing something wrong, but its very difficult to test as the issue only happens on production and not on my dev environment. There is about 11 javascript files that get loaded and they are linked in html like so:

<script type="module" src="/scripts/myfile.js"></script>

The scripts themselves are basically just standard javascript wrapped in modules, example:

import api from "/scripts/api.js";

function myFunction() {
}

window.myFunction = myFunction;

There is no index.js or app.js nor am I using any packing stuff like webpack or parcel.

I have tried removing scripts that didn't run too see if they were the cause, but regardless of what I removed it didn't change anything. Right now with the scripts embedded in html script tags the probable does not occur. Some of the scripts are also webcomponents although this is likely not the issue as they have been there for a very long time and have not caused any issues before.

CodePudding user response：

Since I haven't seen this mentioned anywhere I'll leave it up, but I solved my issue. It turns out that it was caused by using async for scripts that depended on the DOM. Removing the async tag on those scripts fixed it.