htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Unexpected TypeError since upgrading to 2 but I do not know why it happens

Open RussBaz opened this issue 1 year ago • 4 comments

I have started encountering an unexpected error that does not seem to affect much in my code since upgrading to HTMX 2.0 on some pages:

[Error] TypeError: null is not an object (evaluating 'o.includes')
	ft (htmx.min.js:1:20183)
	Pt (htmx.min.js:1:25992)
	(anonymous function) (htmx.min.js:1:26270)
	se (htmx.min.js:1:5323)
	kt (htmx.min.js:1:26249)
	(anonymous function) (htmx.min.js:1:11883)
	(anonymous function) (htmx.min.js:1:15957)
	se (htmx.min.js:1:5323)
	c (htmx.min.js:1:15930)

Does anyone know where it is coming from?

Thanks!

RussBaz avatar Oct 11 '24 15:10 RussBaz

Hey, could you try with the unminified htmx script to be able to identify which line of code triggers this error ? Also, if you're able to track down the situation causing the issue and provide a reproducible example, it'd greatly help!

Telroshan avatar Oct 11 '24 16:10 Telroshan

Just tried and found this error message (did not have time to confirm the cause, however):

Uncaught TypeError: path is null
    boostElement http://localhost:8080/public/scripts/htmx/htmx.min.js:2454
    initNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3030
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3067
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3066
    htmx http://localhost:8080/public/scripts/htmx/htmx.min.js:1581
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2032
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2031
    setTimeout handler*swap http://localhost:8080/public/scripts/htmx/htmx.min.js:2055
    doSwap http://localhost:8080/public/scripts/htmx/htmx.min.js:5075
    handleAjaxResponse http://localhost:8080/public/scripts/htmx/htmx.min.js:5138
    onload http://localhost:8080/public/scripts/htmx/htmx.min.js:4684
    issueAjaxRequest http://localhost:8080/public/scripts/htmx/htmx.min.js:4680
    processVerbs http://localhost:8080/public/scripts/htmx/htmx.min.js:2748
    eventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2642
    addEventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2654
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    addEventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2572
    addTriggerHandler http://localhost:8080/public/scripts/htmx/htmx.min.js:2800
    processVerbs http://localhost:8080/public/scripts/htmx/htmx.min.js:2742
    processVerbs http://localhost:8080/public/scripts/htmx/htmx.min.js:2741
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    processVerbs http://localhost:8080/public/scripts/htmx/htmx.min.js:2735
    initNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3026
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3067
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3066
    htmx http://localhost:8080/public/scripts/htmx/htmx.min.js:1581
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2032
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2031
    setTimeout handler*swap http://localhost:8080/public/scripts/htmx/htmx.min.js:2055
    doSwap http://localhost:8080/public/scripts/htmx/htmx.min.js:5075
    handleAjaxResponse http://localhost:8080/public/scripts/htmx/htmx.min.js:5138
    onload http://localhost:8080/public/scripts/htmx/htmx.min.js:4684
    issueAjaxRequest http://localhost:8080/public/scripts/htmx/htmx.min.js:4680
    boostElement http://localhost:8080/public/scripts/htmx/htmx.min.js:2467
    eventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2642
    addEventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2654
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    addEventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2572
    boostElement http://localhost:8080/public/scripts/htmx/htmx.min.js:2459
    boostElement http://localhost:8080/public/scripts/htmx/htmx.min.js:2458
    initNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3030
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3067
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    processNode http://localhost:8080/public/scripts/htmx/htmx.min.js:3066
    htmx http://localhost:8080/public/scripts/htmx/htmx.min.js:1581
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2032
    forEach http://localhost:8080/public/scripts/htmx/htmx.min.js:770
    doSettle http://localhost:8080/public/scripts/htmx/htmx.min.js:2031
    setTimeout handler*swap http://localhost:8080/public/scripts/htmx/htmx.min.js:2055
    doSwap http://localhost:8080/public/scripts/htmx/htmx.min.js:5075
    handleAjaxResponse http://localhost:8080/public/scripts/htmx/htmx.min.js:5138
    onload http://localhost:8080/public/scripts/htmx/htmx.min.js:4684
    issueAjaxRequest http://localhost:8080/public/scripts/htmx/htmx.min.js:4680
    processVerbs http://localhost:8080/public/scripts/htmx/htmx.min.js:2748
    eventListener http://localhost:8080/public/scripts/htmx/htmx.min.js:2642
    htmx.min.js:2454:21

RussBaz avatar Oct 11 '24 16:10 RussBaz

We hit a similar error and for us it was forms with no explicit "action" attribute. It doesn't have to have a value, so you can do action='', but it needs to be on the form tag. Or you can set boost to false.

cbrandtbuffalo avatar Oct 11 '24 20:10 cbrandtbuffalo

https://github.com/bigskysoftware/htmx/pull/2802/files looks like the issue is related to a recent change in #2802

look like the case where action is not defined may now not be handled well???

i think it should read

if (verb === 'get' && path && path.includes('?')) {

So it will ignore the if when path is not defined.

MichaelWest22 avatar Oct 14 '24 11:10 MichaelWest22

closing as this should now be fixed

1cg avatar Dec 12 '24 00:12 1cg