chore: Downgrade to React 17 and expose NextJs-compatible component

.gitignore

@@ -1,5 +1,5 @@
 /node_modules
-/dist
+/lib
 /docs/public/script.js
 /docs/public/script.js.map
 /coverage

buildConfigs.js

@@ -1,29 +1,28 @@
 const { sassPlugin } = require("esbuild-sass-plugin");
 const cssPlugin = require("esbuild-css-modules-plugin");
 const { dependencies, devDependencies, peerDependencies } = require("./package.json");
-const entryFile = "src/index.tsx";
 
 const sharedConfig = {
   bundle: true,
-  entryPoints: [entryFile],
+  entryPoints: ["src/index.tsx", "src/ReactSearchNext.tsx"],
   logLevel: "info",
   treeShaking: true,
   minify: true,
   sourcemap: true,
   external: [...Object.keys(dependencies), ...Object.keys(devDependencies), ...Object.keys(peerDependencies)],
-  target: ["esnext", "node12.22.0"],
-  plugins: [cssPlugin(), sassPlugin({ type: "style" })]
+  target: ["es6", "node12.22.0"],
+  plugins: [cssPlugin(), sassPlugin({ type: "style" })],
+  outdir: "./lib",
+  outbase: "./src"
 };
 
 module.exports = {
   esm: {
     ...sharedConfig,
-    format: "esm",
-    outfile: "./dist/index.esm.js"
+    format: "esm"
   },
   cjs: {
     ...sharedConfig,
-    format: "cjs",
-    outfile: "./dist/index.cjs.js"
+    format: "cjs"
   }
 };

package.json

@@ -2,11 +2,11 @@
   "name": "@vectara/react-search",
   "version": "0.0.8",
   "description": "A Vectara-powered Search component",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir dist",
+    "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir lib",
     "buildDocs": "node docs/build.js",
     "docs": "node docs/docsServer.js",
     "clean": "rimraf dist",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",
     "@types/prismjs": "^1.26.3",
@@ -54,8 +54,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "live-server": "^1.2.2",
     "markdown-to-jsx": "^7.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.8.2",
     "rimraf": "^5.0.5",

src/ReactSearchNext.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, useEffect, useState } from "react";
+import { Props } from "types";
+
+/**
+ * An implementation of the ReactSearch component for NextJs.
+ * For NextJs, the ReactSearch child component is imported and rendered via useEffect.
+ * Doing it this way guarantees that the component is only rendered on the client, avoiding server-side errors.
+ */
+export const ReactSearchNext = (props: Props): ReactNode => {
+  const [search, setSearch] = useState<ReactNode>(null);
+
+  useEffect(() => {
+    const importAndRenderSearch = async () => {
+      const { ReactSearch } = await import("./");
+
+      setSearch(<ReactSearch {...props} />);
+    };
+
+    importAndRenderSearch();
+  }, []);
+
+  return search;
+};

src/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import getUuid from "uuid-by-string";
 import { VuiFlexContainer, VuiFlexItem, VuiSpinner, VuiText } from "./vui";
-import { DeserializedSearchResult } from "./types";
+import { DeserializedSearchResult, Props } from "./types";
 import { useSearch } from "./useSearch";
 import { SearchResult } from "./SearchResult";
 import { SearchModal } from "./SearchModal";
@@ -24,33 +24,6 @@ const getQueryParam = (urlParams: URLSearchParams, key: string) => {
   return undefined;
 };
 
-export interface Props {
-  // Vectara customer ID
-  customerId: string;
-
-  // Vectara API key
-  apiKey: string;
-
-  // Vectara corpus ID
-  corpusId: string;
-
-  // An optional API url to direct requests toward
-  apiUrl?: string;
-
-  // The number of previous searches to cache.
-  // Default is 0.
-  historySize?: number;
-
-  // The search input placeholder.
-  placeholder?: string;
-
-  // Whether to enable deeplinking to a particular search.
-  isDeeplinkable?: boolean;
-
-  // Whether to open selected results in a new browser tab.
-  openResultsInNewTab?: boolean;
-}
-
 /**
  * A client-side search component that queries a specific corpus with a user-provided string.
  */

src/types.ts

@@ -1,3 +1,30 @@
+export interface Props {
+  // Vectara customer ID
+  customerId: string;
+
+  // Vectara API key
+  apiKey: string;
+
+  // Vectara corpus ID
+  corpusId: string;
+
+  // An optional API url to direct requests toward
+  apiUrl?: string;
+
+  // The number of previous searches to cache.
+  // Default is 0.
+  historySize?: number;
+
+  // The search input placeholder.
+  placeholder?: string;
+
+  // Whether to enable deeplinking to a particular search.
+  isDeeplinkable?: boolean;
+
+  // Whether to open selected results in a new browser tab.
+  openResultsInNewTab?: boolean;
+}
+
 export type DeserializedSearchResult = {
   id: string;
   snippet: {