Fix Meilisearch

.env.template

@@ -21,3 +21,6 @@ NEXT_PUBLIC_INDEX_NAME=products
 
 # Your Next.js revalidation secret. See – https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation
 REVALIDATE_SECRET=supersecret
+
+# Medusa feature flag
+FEATURE_SEARCH_ENABLED=false

README.md

@@ -75,7 +75,7 @@ Navigate into your projects directory and get your environment variables ready:
 
 ```shell
 cd nextjs-starter-medusa/
-mv .env.template .env.local
+cp .env.template .env.local
 ```
 
 ### Install dependencies
@@ -129,7 +129,7 @@ This starter is configured to support using the `medusa-search-meilisearch` plug
 
 Before you can search you will need to install the plugin in your Medusa server, for a written guide on how to do this – [see our documentation](https://docs.medusajs.com/add-plugins/meilisearch).
 
-The search components in this starter are developed with Algolia's `react-instant-search-hooks-web` library which should make it possible for you to seemlesly change your search provider to Algolia instead of MeiliSearch.
+The search components in this starter are developed with Algolia's `react-instantsearch` library which should make it possible for you to seemlesly change your search provider to Algolia instead of MeiliSearch.
 
 To do this you will need to add `algoliasearch` to the project, by running
 
@@ -171,7 +171,7 @@ export async function search(query: string) {
 }
 ```
 
-After this you will need to set up Algolia with your Medusa server, and then you should be good to go. For a more thorough walkthrough of using Algolia with Medusa – [see our documentation](https://docs.medusajs.com/add-plugins/algolia), and the [documentation for using `react-instantsearch-hooks-web`](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react-hooks/).
+After this you will need to set up Algolia with your Medusa server, and then you should be good to go. For a more thorough walkthrough of using Algolia with Medusa – [see our documentation](https://docs.medusajs.com/add-plugins/algolia), and the [documentation for using `react-instantsearch`](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/).
 
 ## App structure
 

package.json

@@ -28,7 +28,7 @@
     "@medusajs/pricing": "^0.1.4",
     "@medusajs/product": "^0.3.4",
     "@medusajs/ui": "^2.2.0",
-    "@meilisearch/instant-meilisearch": "^0.7.1",
+    "@meilisearch/instant-meilisearch": "^0.20.0",
     "@paypal/paypal-js": "^5.0.6",
     "@paypal/react-paypal-js": "^7.8.1",
     "@stripe/react-stripe-js": "^1.7.2",
@@ -42,7 +42,7 @@
     "react": "^18.2.0",
     "react-country-flag": "^3.0.2",
     "react-dom": "^18.2.0",
-    "react-instantsearch-hooks-web": "^6.29.0",
+    "react-instantsearch": "^7.13.0",
     "react-intersection-observer": "^9.3.4",
     "tailwindcss-radix": "^2.8.0",
     "webpack": "^5"

src/lib/search-client.ts

@@ -5,7 +5,7 @@ const endpoint =
 
 const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"
 
-export const searchClient = instantMeiliSearch(endpoint, apiKey)
+export const { searchClient } = instantMeiliSearch(endpoint, apiKey)
 
 export const SEARCH_INDEX_NAME =
   process.env.NEXT_PUBLIC_INDEX_NAME || "products"

src/modules/search/components/hits/index.tsx

@@ -4,7 +4,7 @@ import {
   UseHitsProps,
   useHits,
   useSearchBox,
-} from "react-instantsearch-hooks-web"
+} from "react-instantsearch"
 
 import { ProductHit } from "../hit"
 import ShowAll from "../show-all"

src/modules/search/components/search-box-wrapper/index.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react"
-import { UseSearchBoxProps, useSearchBox } from "react-instantsearch-hooks-web"
+import { UseSearchBoxProps, useSearchBox } from "react-instantsearch"
 
 export type ControlledSearchBoxProps = React.ComponentProps<"div"> & {
   inputRef: RefObject<HTMLInputElement>

src/modules/search/components/show-all/index.tsx

@@ -1,5 +1,5 @@
 import { Container, Text } from "@medusajs/ui"
-import { useHits, useSearchBox } from "react-instantsearch-hooks-web"
+import { useHits, useSearchBox } from "react-instantsearch"
 
 import InteractiveLink from "@modules/common/components/interactive-link"
 

src/modules/search/templates/search-modal/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { InstantSearch } from "react-instantsearch-hooks-web"
+import { InstantSearch } from "react-instantsearch"
 import { useRouter } from "next/navigation"
 import { MagnifyingGlassMini } from "@medusajs/icons"