0

algolia の instantsearch.js を使用して Algolia システムを構築しようとしていますが、このコードを実行すると、「ReferenceError: algoliasearch が定義されていません」というエラーが表示されます。一部のインポートが不足しているためですか？これを修正するにはどうすればよいですか?

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/instantsearch.css@7.3.1/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();
4

1 に答える 1