Error: The `searchClient` must implement a `search` method.
chrisgo opened this issue · comments
Description
When using the meilisearch plugin for instantSearch, an error shows up Error: The searchClient must implement a search method.
Screenshots or Logs
Environment (please complete the following information):
- OS: MacOS (latest)
- Browser: Firefox and Chrome (latest)
- Meilisearch version: 1.5.0 (just upgraded) was also happening on 1.3.0 (may not matter, this is the server)
- instant-meilisearch version: using jsdeliver CDN
- instantsearch.js version: using jsdeliver CDN
This only occurred recently or just noticed it around 12/12 10:00 am PT because the search bar on the user interface was not displaying properly. Instead of a text input field, it just shows an ellipse (3 horizontal dots)
I checked the source code in github and your code does have the search function in it (even the minified version above)
... search:function(t){return n(this,void 0,void 0 ...
"Vanilla JS" example from Meilisearch documentation also exhibits this behavior
https://www.meilisearch.com/docs/learn/front_end/front_end_integration#lets-try-it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>
<body>
<div class="wrapper">
<div id="searchbox" focus></div>
<div id="hits"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script>
const search = instantsearch({
indexName: "movies",
searchClient: instantMeiliSearch(
"http://localhost:7700"
)
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox"
}),
instantsearch.widgets.configure({ hitsPerPage: 8 }),
instantsearch.widgets.hits({
container: "#hits",
templates: {
item: `
<div>
<div class="hit-name">
{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
</div>
</div>
`
}
})
]);
search.start();
</script>
</html>
Had the same problem. Asked about it in the Discord yesterday. Also found the solution.
https://discord.com/channels/1006923006964154428/1184150057478533240
The problem seems to be the nested searchClient declaration.
Seems to be working when changing the config to:
const { searchClient } = instantMeiliSearch(
"https://ms.domain.tld",
"TOKEN",
{
placeholderSearch: false,
hitsPerPage: 10,
}
)
const search = instantsearch({
indexName: "frontpage",
searchClient,
initialUiState: {
frontpage: {
query: ''
}
}
});
Hi @pschoenmakers thank you very much! Now I know there is a discord 😄
@pschoenmakers thanks for the resolution but I cannot open the discord link - the invite to join doesn't seem to work.
I cannot figure it out despite the hint you gave, I still get the same error. How can I get a discord invitation, or can you please post a snippet that includes what you imported? Thanks!!
Hey @fabiog1901 check it out https://discord.meilisearch.com 🥇
Where are you importing the instantsearch function from?