search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
35.76k stars 1.21k forks source link

Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector #101

Closed NetheriteTree closed 4 years ago

NetheriteTree commented 4 years ago

This is the error:

swapError.htmx
He @ htmx.min.js:1
Ne @ htmx.min.js:1
Oe @ htmx.min.js:1
e @ htmx.min.js:1
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1
htmx.min.js:1 DOMException: Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector.
    at https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4366
    at C (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:1958)
    at J (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4317)
    at z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4563)
    at K (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5290)
    at Z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5830)
    at $ (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5902)
    at e (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17308)
    at XMLHttpRequest.f.onload (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17807)
He @ htmx.min.js:1
Ne @ htmx.min.js:1
Oe @ htmx.min.js:1
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1
htmx.min.js:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector.
    at https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4366
    at C (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:1958)
    at J (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4317)
    at z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4563)
    at K (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5290)
    at Z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5830)
    at $ (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5902)
    at e (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17308)
    at XMLHttpRequest.f.onload (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17807)
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1

This is the html:

<a hx-post="/htmx中文文档" hx-push-url="true" hx-target="#htmxdocs" hx-select="#htmxmain" href="/htmx中文文档"><span class="su-label su-label-type-info">文档</span></a>

This error only happens on the first button of this page. And others work fine. Maybe the page is too large? And this is the full log:

configRequest.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class=​"htmx-request">​…​</a>​ {parameters: {…}, unfilteredParameters: {…}, headers: {…}, target: div#htmxdocs.htmxdocs, verb: "post", …}
htmx.min.js:1 beforeRequest.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class=​"htmx-request">​…​</a>​ {xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs, elt: a}
htmx.min.js:1 beforeOnLoad.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs, elt: a.htmx-request}
htmx.min.js:1 beforeSwap.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs, elt: a.htmx-request}
htmx.min.js:1 beforeHistorySave.htmx <body id=​"top" class=​"post-template-default single single-post postid-354 single-format-standard translatepress-zh_CN widgets_margin_top_off header-horizontal site-layout-full elementor-default wpdiscuz_7.0.2 su-other-shortcodes-loaded" itemtype=​"https:​/​/​schema.org/​WebPage" itemscope style=​"padding-top:​ 90px;​">​…​</body>​ {path: "/htmx%e4%b8%ad%e6%96%87%e6%96%87%e6%a1%a3/", historyElt: body#top.post-template-default.single.single-post.postid-354.single-format-standard.translatepress-…, elt: body#top.post-template-default.single.single-post.postid-354.single-format-standard.translatepress-…}
htmx.min.js:1 swapError.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {error: "swapError.htmx", xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs.htmx-swapping, elt: a.htmx-request}
htmx.min.js:1 swapError.htmx
He @ htmx.min.js:1
Ne @ htmx.min.js:1
Oe @ htmx.min.js:1
e @ htmx.min.js:1
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1
htmx.min.js:1 onLoadError.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {error: DOMException: Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector.
 …, xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs.htmx-swapping, elt: a.htmx-request}
htmx.min.js:1 DOMException: Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector.
    at https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4366
    at C (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:1958)
    at J (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4317)
    at z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4563)
    at K (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5290)
    at Z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5830)
    at $ (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5902)
    at e (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17308)
    at XMLHttpRequest.f.onload (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17807)
He @ htmx.min.js:1
Ne @ htmx.min.js:1
Oe @ htmx.min.js:1
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1
htmx.min.js:1 afterRequest.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs.htmx-swapping, elt: a}
htmx.min.js:1 afterOnLoad.htmx <a hx-post=​"/​htmx中文文档" hx-push-url=​"true" hx-target=​"#htmxdocs" hx-select=​"#htmxmain" href=​"/​htmx中文文档" class>​…​</a>​ {xhr: XMLHttpRequest, target: div#htmxdocs.htmxdocs.htmx-swapping, elt: a}
htmx.min.js:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'DIV[id=]' is not a valid selector.
    at https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4366
    at C (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:1958)
    at J (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4317)
    at z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:4563)
    at K (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5290)
    at Z (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5830)
    at $ (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:5902)
    at e (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17308)
    at XMLHttpRequest.f.onload (https://unpkg.com/htmx.org@0.0.4/dist/htmx.min.js:1:17807)
f.onload @ htmx.min.js:1
load(异步)
et @ htmx.min.js:1
n @ htmx.min.js:1
t @ htmx.min.js:1
1cg commented 4 years ago

@JeansouLiu can you use the unminified version so we can see what line the code is failing at?

Miguel-Serejo commented 4 years ago

A similar error just happened to me and it turned out to be because the html I was retrieving had an input with name="id". Can you confirm if you also have a similar element in the HTML that you are fetching from the server?

This is the logged exception I get using the unminified version: Uncaught DOMException: Element.querySelector: 'FORM[id=[object HTMLInputElement]]' is not a valid selector htmx.js:377

This seems related, but if not I'll start a new issue.

1cg commented 4 years ago

@36864 @JeansouLiu can you guys try to reproduce the issue in the regression test I just pushed up:

https://github.com/bigskysoftware/htmx/commit/efd3ab85f0f921bca1fde539af65216df7657386

NetheriteTree commented 4 years ago

@JeansouLiu can you use the unminified version so we can see what line the code is failing at? Snipaste_2020-06-17_08-31-57 Snipaste_2020-06-17_08-32-14

1cg commented 4 years ago

Perfect, fixed with a regression test with https://github.com/bigskysoftware/htmx/commit/19b933449b1af4d4589bee24ae201dbe0c8d374f

Will be out with the 0.1 release on Friday.

Thank you!

NetheriteTree commented 4 years ago

Perfect, fixed with a regression test with 19b9334

Will be out with the 0.1 release on Friday.

Thank you!

after updating to 0.05 the code above completely broke. it just redirect to the target page and do not have any error.

NetheriteTree commented 4 years ago

Perfect, fixed with a regression test with 19b9334 Will be out with the 0.1 release on Friday. Thank you!

after updating to 0.05 the code above completely broke. it just redirect to the target page and do not have any error.

Perfect, fixed with a regression test with 19b9334

Will be out with the 0.1 release on Friday.

Thank you!

It seems it is not triggered as there is nothing in the console