Cannot read property 'noResults' of undefined when implementing autocomplete Algolia

Hi, am new using algolia. I implement my code using vuejs3, i follow steps to make autocomplete search (@algolia/autocomplete-js, algoliasearch/lite, @algolia/autocomplete-theme-classic). But stuck because of this error:

autocomplete.js?6a58:41 Uncaught (in promise) TypeError: Cannot read property ‘noResults’ of undefined
at eval (autocomplete.js?6a58:41)
at Array.some ()
at Object.onStateChange (autocomplete.js?6a58:40)
at Object.onStateChange (getDefaultProps.js?6998:59)
at onStoreStateChange (createAutocomplete.js?c642:31)
at Object.dispatch (createStore.js?310c:21)
at setCollections (getAutocompleteSetters.js?21e6:32)
at eval (onInput.js?9850:75)

This is how i create and produce the error:

export default {

    setup(){

        let searchClient = algoliasearch('xxxx','xxxxxxxxxxxxx')
    
        onMounted(() => {
            autocomplete({
                container: '#autocomplete',
                openOnFocus: true,
                getSources({ query }){
                    return [
                        {
                            sourceId: 'courses',
                            getItems(){
                                return getAlgoliaResults({
                                    searchClient,
                                    queries: [
                                        {
                                            indexName: 'dev_Skillbaru',
                                            query,
                                            params: {
                                                hitsPerPage: 10,
                                                attributesToSnippet: ['title:15', 'category:10'],
                                                snippetEllipsisText: '...',
                                            }
                                        }
                                    ]
                                })
                            }
                        }
                    ]
                },
                renderer: {
                    createElement: h,
                    Fragment,
                },
                render({ children }, root){
                    render(children, root)
                }
            })
        })
        return {
        }
    }

}

and this is my template


<template>
<div class="app-container">
    <h1>Vue Application</h1>
    <div id="autocomplete" />
  </div>
</template>

Can somebody explain to me what happened? Thanks

Hi @super.diazzz, You may need to define the template as seen in this documentation.

1 Like

Thank you, works like charm

1 Like