search page doesn't work with meili search

[luluhoc]

search page doesn't work with meili search

 ⨯ src/app/[locale]/(main)/search/actions.ts (10:29) @ initIndex
 ⨯ TypeError: _lib_search_client__WEBPACK_IMPORTED_MODULE_2__.searchClient.initIndex is not a function
    at search (search/actions.ts:17:80)
    at StorePage (search/[query]/page.tsx:19:72)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
   8 |  */
   9 | export async function search(query: string) {
> 10 |   const index = searchClient.initIndex(SEARCH_INDEX_NAME)
     |                             ^
  11 |   const { hits } = await index.search(query)
  12 |   return hits
  13 | }

[chrislaai]

I'm not sure if your issue is related to this. I had a similar issue, and then I found that the new storefront used Algolia as the default search. After commenting out the Algolia part and uncommenting the meilisearch part, everything worked fine. https://github.com/medusajs/nextjs-starter-medusa/blob/main/src/lib/search-client.ts

[luluhoc]

I'm not sure if your issue is related to this. I had a similar issue, and then I found that the new storefront used Algolia as the default search. After commenting out the Algolia part and uncommenting the meilisearch part, everything worked fine. https://github.com/medusajs/nextjs-starter-medusa/blob/main/src/lib/search-client.ts

The search is working is simply the search page doesn't work when you go to localhost:8000/search/query

the initIndex doesn't exists on meilisearch

[chrislaai]

Okay. It seems they have only adapted to Algolia so far.

[chrislaai]

Hi @VariableVic Will this storefront be adapted to MeiliSearch?

[nfzv]

Hey, here is a temporary fix, if you want meilisearch to work on the search page

search/page.tsx

export default async function StorePage({ searchParams }: { searchParams: { query: string } }) {
  const { query } = searchParams
  const {hits} = await search(query)
  return <SearchResultsTemplate query={query} hits={hits} />
}

search/actions.ts

export async function search(query: string) {
  const queries = [{params:{query:query}, indexName: SEARCH_INDEX_NAME}]
  const { results } = await searchClient.search(queries) as Record<string,any>
  return results[0]
}

search-client.ts

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch"
const endpoint =
  process.env.NEXT_PUBLIC_SEARCH_ENDPOINT || "http://127.0.0.1:7700"
const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"
export const searchClient = instantMeiliSearch(endpoint, apiKey, {primaryKey: 'id', placeholderSearch: false})
export const SEARCH_INDEX_NAME =
  process.env.NEXT_PUBLIC_INDEX_NAME || "products"

[VariableVic]

Thanks guys, I'll look into this. The goal is to support both Algolia and MeiliSearch.

[VariableVic]

Just merged a fix guys, tested with both Meili and Algolia, should work fine now. Also resetted MeiliSearch as the default provider. Let me know if this fixes your issues.

Thanks @aidensgithub, used some of your code.

[frankoadeleye]

HI @VariableVic I have trouble getting Algolia to work on the Storefront (works fine on backend). Can you kindly point to the branch in which you made this update?

Thanks

[VariableVic]

@frankoadeleye The fix is merged to main, did you pull the latest changes? If so, what issue are you running into?

[frankoadeleye]

@VariableVic the Algolia response returns empty array in the network tab. Search query is 'medusa', and it's present on all the seed template product items.

{ "results": [ { "hits": [], "nbHits": 0, "page": 0, "nbPages": 0, "hitsPerPage": 20, "exhaustiveNbHits": true, "exhaustiveTypo": true, "exhaustive": { "nbHits": true, "typo": true }, "query": "medusa", "params": "facets=%5B%5D&highlightPostTag=%2Fais-highlight&highlightPreTag=ais-highlight&query=medusa&tagFilters=", "index": "products", "renderingContent": {}, "processingTimeMS": 1, "processingTimingsMS": { "_request": { "roundTrip": 145 } } } ]

Any suggestion would be appreciated

[chrislaai]

Just merged a fix guys, tested with both Meili and Algolia, should work fine now. Also resetted MeiliSearch as the default provider. Let me know if this fixes your issues.

Thanks @aidensgithub, used some of your code.

In my case, it can search, but does not show the results. I saw that the search results can be displayed on the demo.

[VariableVic]

@chrislaai could you share your plugin settings in medusa-config.js please?

[chrislaai]

@chrislaai could you share your plugin settings in medusa-config.js please? like below: { resolve: medusa-plugin-meilisearch, options: { config: { host: process.env.MEILISEARCH_HOST, apiKey: process.env.MEILISEARCH_API_KEY, }, settings: { products: { indexSettings: { searchableAttributes: [ "title", "description", "variant_sku", ], displayedAttributes: [ "title", "description", "variant_sku", "thumbnail", "handle", ], }, primaryKey: "id", transform: (product) => ({ id: product.id, }), }, }, }, },

[VariableVic]

@chrislaai Can you try adding "id" to the displayedAttributes array, reboot your Medusa server and try again? The Search Results template needs the product ids to fetch previews.

[chrislaai]

@chrislaai Can you try adding "id" to the displayedAttributes array, reboot your Medusa server and try again? The Search Results template needs the product ids to fetch previews.

Thanks, the search works fine now.