htmx icon indicating copy to clipboard operation
htmx copied to clipboard

HTMX doesn't work if included with `async`

Open MonstraG opened this issue 1 year ago • 6 comments

Basically, https://github.com/bigskysoftware/htmx/issues/142, except again. And there are no errors in the console.

Recording 2024-02-17 at 10 22 48

MonstraG avatar Feb 17 '24 09:02 MonstraG

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.

aburd avatar Feb 22 '24 20:02 aburd

I would want async to get the fastest page load. I would also expect htmx to wait for DOMContentLoaded already.

MonstraG avatar Feb 22 '24 21:02 MonstraG

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.

aburd avatar Feb 23 '24 01:02 aburd

I can confirm that defer doesn't break it

MonstraG avatar Feb 24 '24 13:02 MonstraG

Just tried on 2.0.0-beta1, same problem.

MonstraG avatar Mar 19 '24 17:03 MonstraG

Me too

f-liva avatar Mar 27 '24 14:03 f-liva