htmx
htmx copied to clipboard
Unexpected TypeError since upgrading to 2 but I do not know why it happens
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!
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!
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
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.
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.
closing as this should now be fixed