I'm trying to build and Algolia system with instantsearch.js from algolia but when I run this code I get an error of "ReferenceError: algoliasearch is not defined". Is it because I'm missing some imports? How do I fix this?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="sytlesheet" src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">
</head>
<body>
<header>
<div id="input-container">
<input id="search-input" placeholder="Search for Products">
</div>
</header>
<main>
<div id="hits">
</div>
<div id="pagination">
</div>
</main>
</body>
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<script src="app.js"></script>
</html>
app.js
const searchClient = algoliasearch('', '');
const search = instantsearch({
indexName: "users",
searchClient,
urlSync: true,
})
search.addWidgets([
instantsearch.widgets.searchBox({
container: "#search-input",
}),
instantsearch.widgets.hits({
container: "#hits",
hitsPerPage: 10,
templates: {
item: document.getElementById("hit-template").innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"<em>"
}
}),
instantsearch.widgets.pagination({
container: "#pagination",
}),
]);
search.start();
It looks like your cdn script register is umd module which registers
instantsearchobject in window instead ofalgoliasearch