htmx
htmx copied to clipboard
HTMX doesn't work if included with `async`
Basically, https://github.com/bigskysoftware/htmx/issues/142, except again. And there are no errors in the console.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
async- For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
defer This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
I could see the async tag being problematic for htmx, because it needs to attach event handlers to all the elements, but if it’s doing it in parallel to document parsing, couldn’t this cause a race condition? Maybe what you want is the defer attribute.
I would want async to get the fastest page load. I would also expect htmx to wait for DOMContentLoaded already.
Well given your issue, I’m not sure but maybe using the defer attribute would solve your problem and do it even faster since it is “executed after the document has been parsed, but before firing DOMContentLoaded”.
But you’re right, in the absence of documentation it should just work. It should be fixed to work regardless of those attributes, or at least warn you in the console that the script is not meant to work with async if it is by design.
I can confirm that defer doesn't break it
Just tried on 2.0.0-beta1, same problem.
Me too