Fix search bar on Docosaurus 3.9

[martindekov]

Fixing search bar on Docosaurus by swizzling the
problematic package SearchBar of:

docusaurus/theme-search-algolia

And fixing the places where null is returned. Running the site locally with those guards prevented nulls.

Problem:

Search bar does not work properly on newer version and complains it cannot call replace method on null, due to skipped null guards.

Solution:

Extract search bar from the dependency using swizzle and add the guards

Related Issue(s):

harvester/harvester#9791

Test plan:

Ran site and tried to search something and it did not throw exception:

Also can be tested in the Deploy Preview below

Additional documentation or context

Following what we did with DocVersionBanner, same was done with SearchBar:

1. Found the component which throw the exception
2. Ran swizzle to extract it and it's basically javascript version of this code which is typescript: https://github.com/facebook/docusaurus/blob/v3.9.2/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx
3. Guard nulls
4. Leave the rest as is

Most likely culprit is here:
algolia/docsearch#2780 (comment)

[github-actions]

Name	Link
🔨 Latest commit	0777708
😎 Deploy Preview	https://6970ef680cf5a11324fd04a3--harvester-preview.netlify.app

[Copilot]

Pull request overview

This WIP pull request addresses search bar issues in Docusaurus 3.9 by swizzling the @docusaurus/theme-search-algolia SearchBar component and adding null guards to prevent runtime errors from null values.

Changes:

• Added a custom SearchBar component with null guards for navigation URLs
• Implemented fallback values for search result items and hierarchy fields
• Added null safety checks for Ask AI feature parameters

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[martindekov]

Resolved the comments of copilot without addressing, I would not like to stray away much from the original implementation, simply attempted to add basic guards against potential null places. Might not be the prettiest javascript code though but process was:

1. yarn docusaurus swizzle @docusaurus/theme-search-algolia SearchBar --wrap --danger
2. add guards only when necessary
3. leave the rest as is

[Yu-Jack]

I also saw you opened a revert PR #960, but it seems like you have fixed it in this PR. So, merging this PR can fix the search issue, right?

[Yu-Jack]

Just one question, when I run the yarn swizzle @docusaurus/theme-search-algolia SearchBar and select JS, Eject and YES: I know what I am doing!. It generated a style.css, do we need that?

[martindekov]

I also saw you opened a revert PR #960, but it seems like you have fixed it in this PR. So, merging this PR can fix the search issue, right?

This fixes the issue, yes, the revert was in case I couldn't fix it by EOD, kept them bot open in case you decide you don't like this approach of swizzling things

Just one question, when I run the yarn swizzle @docusaurus/theme-search-algolia SearchBar and select JS, Eject and YES: I know what I am doing!. It generated a style.css, do we need that?

yes it generates style.css, but I removed it and imported it from source as we don't change it:

  return Promise.all([
    import('@docsearch/react/modal'),
    import('@docsearch/react/style'),
    #########################<------------------------------------------------------ the import was here local 
  ]).then(([{DocSearchModal: Modal}]) => {
    DocSearchModal = Modal;
  });

wanted to keep only the relevant parts

[Yu-Jack]

Thanks for the quick fix.

[slorber]

Instead of ejecting the component, you can probably wrap it and pass an extra transformItems prop to the wrapper to apply your custom logic: less code to maintain.

This trick was first suggested here: facebook/docusaurus#8461 (comment)

[martindekov]

I did try to do that and code with wrapper was a lot less, but for some reason the problem persisted and I just decided to take the whole swizzle and fix in place. We needed this fix fast so that's why I went with this and decided to stop debugging the wrapper approach. Will keep this suggestion open for further reference.

Also very grateful for all your help, truly did not expect once again to go as far as reviewing specific changes on project which adopts the library!

[slorber]

I can't tell for sure, but maybe the problem is that your custom crawler config is different from the recommended setup?

https://github.com/harvester/docs/blob/main/docsearch.json
https://docsearch.algolia.com/docs/templates/#docusaurus-v2--v3-template