Breaking: Frontend UI poof bug

[dylanh724]

The UI doesn't load in, so search doesn't work (null err from docsearch.js).

I tried to debug it, but the file is uglified, so it's too difficult to debug (keep an eye out for a feat request to un-uglify these so we can help you guys debug).

More context, screenshots, and [very dirty] workarounds in the Docsearch Discord thread

TL;DR:

1. 

2. This prevents generating the HTML code:

<div class="search-button__wrapper">
    <div class="search-button__overlay"></div>
    <div class="search-button__search-container">
		<form class="bd-search d-flex align-items-center"
			  action="search.html"
			  method="get">
		  <i class="fa-solid fa-magnifying-glass"></i>
		  <input type="search"
				 class="form-control"
				 name="q"
				 id="search-input"
				 placeholder="Search..."
				 aria-label="Search..."
				 autocomplete="off"
				 autocorrect="off"
				 autocapitalize="off"
				 spellcheck="false"/>
			<span class="search-button__kbd-shortcut">
				<kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd>
			</span>
		</form>
	</div>
</div>

The ultra-dirty workaround is to copy+paste this into source/_templates/layout.html to inject this directly in instead of awaiting generation. The other js containing the api keys and such still spawn np.

[kai687]

Could you make the issue description self-contained if possible? I realize that this is duplicate work, but from the description alone, I have no idea about the environment (conf.py, which extensions etc.) and where the problem occurs (DocSearch or this extension).

If I had to guess, is it possible that DocSearch doesn't find the container element to inject itself into?

For example, themes that use the searchbox.html template have a <div id={CONTAINER_ID}>, where {CONTAINER_ID} is by default 'docsearch'. You can use a different ID and use the docsearch_container option in your conf.py.

Again, just a guess without looking at the Discord.

[kai687]

Out of curiosity, I tried to add docsearch to a project with sphinx-book-theme and I get a similar error:

(bit different wording in Firefox --- double-checked in Chrome and it's identical to your screenshot).

So maybe I was right with my guess.

[dylanh724]

Possible! I'll try adding that conf.py value - I can use pretty much any wrapper?

[kai687]

Pretty much, it just has to exist on the page. I'm not super familiar with how the Sphinx book theme, but if it lets you add custom templates at certain places, you could test it by providing a <div id="docsearch"></div>. (I think the element must be empty, but I'm not 100% sure).

[dylanh724]

It's true, that's what was needed, which doesn't spawn by default in sphinx-book-theme; error gone (and was able to remove my workaround).

I made a source/_templates/inject-algolia-docsearch.html with:

<!-- Algolia DocSearch requires a #docsearch id wrapper [anywhere] to inject the search bar -->
<!-- This would normally create a search bar, but we'll hide it with CSS, styling our theme's bar -->
<div id="docsearch"></div>

Then added it to my conf.py html_sidebars:

html_sidebars = {
    "**": [
        "navbar-logo",
        "search-button-field", 
        "inject-algolia-docsearch",   # <<<<<<<<
        "sbt-sidebar-nav",
    ],
}