Including docusaurus-plugin-search-local causes runtime errors in website

[dima]

Including docusaurus-plugin-search-local as a plugin in docusaurus 3.4.x causes the following issues at runtime in production build. Doesn't seem to affect usability.

The following patch fixes both of the issues I identified, this one and the pull request I have open.

diff --git a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchBar.jsx b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchBar.jsx
index cbedf6e..648a9c1 100644
--- a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchBar.jsx
+++ b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchBar.jsx
@@ -1,11 +1,11 @@
-import { Component, useEffect, useState } from "react";
 import { useLocation } from "@docusaurus/router";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
-import { SearchButton } from "./SearchButton";
-import SearchModal from "../SearchModal";
-import ErrorBoundary from "../ErrorBoundary";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import Mark from "mark.js";
+import { Component, useEffect, useState } from "react";
+import ErrorBoundary from "../ErrorBoundary";
+import SearchModal from "../SearchModal";
+import { SearchButton } from "./SearchButton";
 const SEARCH_PARAM_HIGHLIGHT = "_highlight";
 function isEditingContent(event) {
     const element = event.target;
@@ -26,12 +26,13 @@ export function SearchBar() {
     const { highlightSearchTermsOnTargetPage } = usePluginData("docusaurus-plugin-search-local");
     const [isOpen, setIsOpen] = useState(false);
     const location = useLocation();
+    const isBrowser = useIsBrowser();
     useEffect(() => {
         if (highlightSearchTermsOnTargetPage) {
             if (!Mark) {
                 return;
             }
-            const keywords = ExecutionEnvironment.canUseDOM
+            const keywords = isBrowser
                 ? new URLSearchParams(location.search).getAll(SEARCH_PARAM_HIGHLIGHT)
                 : [];
             if (keywords.length === 0) {
@@ -45,7 +46,7 @@ export function SearchBar() {
             mark.unmark();
             mark.mark(keywords);
         }
-    }, [highlightSearchTermsOnTargetPage, location.search]);
+    }, [isBrowser, highlightSearchTermsOnTargetPage, location.search]);
     useEffect(() => {
         function onKeyDown(event) {
             if ((event.keyCode === 27 && isOpen) ||
diff --git a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchButton.jsx b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchButton.jsx
index f07451b..849b7e2 100644
--- a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchButton.jsx
+++ b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchBar/SearchButton.jsx
@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import * as React from "react";
+import { useMemo } from "react";
 import "./SearchButton.css";
 function ControlKeyIcon() {
     return (<svg width="15" height="15" className="DocSearch-Control-Key-Icon">
@@ -18,12 +19,13 @@ function isAppleDevice() {
 }
 export const SearchButton = React.forwardRef(({ translations = {}, ...props }, ref) => {
     const { buttonText = "Search", buttonAriaLabel = "Search" } = translations;
+    const isBrowser = useIsBrowser();
     const key = useMemo(() => {
-        if (typeof navigator !== "undefined") {
+        if (isBrowser && typeof navigator !== "undefined") {
             return isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT;
         }
         return null;
-    }, []);
+    }, [isBrowser]);
     return (<button type="button" className="DocSearch DocSearch-Button" aria-label={buttonAriaLabel} {...props} ref={ref}>
       <span className="DocSearch-Button-Container">
         <SearchIcon />
diff --git a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchModal/SearchResult.jsx b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchModal/SearchResult.jsx
index bfe2299..ea26dbf 100644
--- a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchModal/SearchResult.jsx
+++ b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchModal/SearchResult.jsx
@@ -52,7 +52,7 @@ const SearchResult = (props) => {
             url += `?${buildDestinationQueryParams(tokens)}`;
         }
         if (h) {
-            url += h;
+            url = h;
         }
         history.push(url);
         onClick();
diff --git a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchPage/SearchPage.jsx b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchPage/SearchPage.jsx
index 1f594dd..102e690 100644
--- a/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchPage/SearchPage.jsx
+++ b/node_modules/docusaurus-plugin-search-local/lib/client/theme/SearchPage/SearchPage.jsx
@@ -112,7 +112,7 @@ function SearchResultItem({ searchResult: { document, type, page, tokens, metada
     }
     return (<article className={styles.searchResultItem}>
       <h2>
-        <Link to={document.u + (document.h || "")} dangerouslySetInnerHTML={{
+        <Link to={document.h ? document.h : document.u} dangerouslySetInnerHTML={{
             __html: isContent
                 ? highlight(articleTitle, tokens)
                 : highlightStemmed(articleTitle, getStemmedPositions(metadata, "t"), tokens, 100),
diff --git a/node_modules/docusaurus-plugin-search-local/lib/client/theme/hooks/useSearchQuery.js b/node_modules/docusaurus-plugin-search-local/lib/client/theme/hooks/useSearchQuery.js
index 8520918..524a40f 100644
--- a/node_modules/docusaurus-plugin-search-local/lib/client/theme/hooks/useSearchQuery.js
+++ b/node_modules/docusaurus-plugin-search-local/lib/client/theme/hooks/useSearchQuery.js
@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useHistory, useLocation } from "@docusaurus/router";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 const SEARCH_PARAM_QUERY = "q";
 function useSearchQuery() {
     const history = useHistory();
     const location = useLocation();
+    const isBrowser = useIsBrowser();
     const { siteConfig: { baseUrl }, } = useDocusaurusContext();
     return {
-        searchValue: (ExecutionEnvironment.canUseDOM &&
+        searchValue: (isBrowser &&
             new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
             "",
         updateSearchPath: (searchValue) => {