algolia / instantsearch

⚑️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/
MIT License
3.73k stars 526 forks source link

create-instantsearch-app --config.json builds an app that doesn't work #6302

Closed davie-robertson closed 4 months ago

davie-robertson commented 4 months ago

πŸ› Current behavior

I thought I would build a vanilla JS app to see how instant search works against an existing index in my Alogia instance with a view to building something that might work as a web component with shadowdom etc.

I'm following the documentation in here in the repo and on the Algolia website for creating a new instantsearch app.

I have created a config.json with the following config with all my details populated:

{
  "name": "unspsc-search",
  "template": "InstantSearch.js",

  "appId": "MY_ALGOLIA_APP_ID",
  "apiKey": "MY_ALGOLIA_SEARCH_API_KEY",
  "indexName": "MY_INDEX_NAME",
  "searchPlaceholder": "Search my Data codes or names",
  "attributesToDisplay": ["name", "code", "type"],
  "imageAttribute": null,
  "attributesForFaceting": [
    "type",
    "hierarchical_categories.lvl0",
    "hierarchical_categories.lvl1",
    "hierarchical_categories.lvl2"
  ],
  "enableInsights": true
}

I remove "libraryVersion": "", so the latest would be installed

I ran the CLI npx create-instantsearch-app unspsc-search --config config.json

The app was created, I then edited the index.html and removed the content with class="header" as described here https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/#add-the-search-ui-code

Removed the CSS and replaced it with the CSS described in the same link.

Opened the browser, didn't see any search option. Went to browser Dev tools and saw:

Error: Container must be `string` or `HTMLElement`. Unable to find #hierarchical_categories.lvl0-list
    at N (instantsearch.js@4.73.2:2:12434)
    at instantsearch.js@4.73.2:2:290219
    at app.js:45:42

πŸ” Steps to reproduce

  1. create a config.json with Algolia details
  2. npx create-instantsearch-app unspsc-search --config config.json
  3. edit HTML and CSS as per instructions
  4. npm start

Live reproduction

n/a

πŸ’­ Expected behavior

I expect a simple JavaScript based search app using my Algolia index.

Package version

create-instantsearch-app

Operating system

Ubuntu in WSL2

Browser

Any

Code of Conduct

davie-robertson commented 4 months ago

never mind, the problem is my path to the attributesForFaceting