Resolving Typesense Setup Issues with VueJS
TLDR A sought help with setting up Typesense in a CDN VueJS application. Jason guided him to adjust the initialization and provided a solution to an undefined item warning, resulting in a successful setup.
1
1
1
1
Jul 09, 2021 (31 months ago)
A
05:13 AMhttps://pastebin.com/gsLEXH7D
Jason
05:17 AMAnd remove the current instantsearch initialization lines which is only for instantsearch.js (Lines 37-57)
A
05:21 AMA
05:21 AM<script src=“https://cdn.jsdelivr.net/npm/typesense-instant[email protected]/dist/typesense-instantsearch-adapter.min.js”></script>
<script src=“https://unpkg.com/[email protected]/dist/vue.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-instantsearch.js”></script>
A
05:21 AMJason
05:23 AMA
05:25 AMA
05:26 AMA
05:26 AMA
05:26 AMJason
05:27 AMJason
05:30 AMA
05:37 AMJason
05:39 AMJason
05:39 AMJason
05:40 AMThen searchClient needs to be passed into the ais-instant-search component (Line 9), and for that, searchClient needs to be passed to Vue (Line 44).
A
05:46 AMA
05:46 AM<div id="app">
<template>
<ais-instant-search :search-client="searchClient" index-name="multiple_choice_questions">
<ais-search-box />
<ais-hits>
<div slot="item" slot-scope="{ item }">
<h2>{{ item.name }}</h2>
</div>
</ais-hits>
</ais-instant-search>
</template>
</div>
A
05:46 AMA
05:47 AMA
05:47 AMJason
05:48 AMWhich line is this?
A
05:49 AM<ais-hits>
<div slot="item" slot-scope="{ item }">
<h2>{{ item.name }}</h2>
</div>
</ais-hits>
A
05:50 AMJason
05:50 AMitem.name
or { item }
?A
05:51 AM[Vue warn]: Error in render function: “TypeError: item is undefined” (found in <Root>)
TypeError: item is undefined
A
05:52 AMnew Vue({
as the source of the error :thinking_face:A
05:53 AM1
Jason
05:53 AM<div slot="item"...>
to <template slot="item"...
A
05:54 AM[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Error in render function: "TypeError: item is undefined"
A
05:55 AM<div id="app">
<template>
<ais-instant-search :search-client="searchClient" index-name="multiple_choice_questions">
<ais-search-box />
<ais-hits>
<template slot="item" slot-scope="{ item }">
<h2>{{ item.name }}</h2>
</template>
</ais-hits>
</ais-instant-search>
</template>
</div>
Jason
05:56 AMA
05:56 AMA
05:57 AM1
Jason
05:58 AM<h2>@{{ item.name }}</h2>
A
05:59 AMA
05:59 AMA
06:00 AMJason
06:00 AM<h2>${item.name}</h2>
?A
06:00 AMJason
06:01 AMA
06:01 AM1
Jason
06:02 AMA
06:02 AMJason
06:02 AMA
06:02 AMA
06:02 AMA
06:03 AMA
06:03 AMitem
whatever that isA
06:03 AMA
06:04 AMJason
06:04 AMJason
06:04 AMA
06:05 AMA
06:05 AMA
06:06 AMschema = {
‘name’ => ‘multiple_choice_questions’,
‘fields’ => [
{
‘name’ => ‘id’,
‘type’ => ‘string’
},
{
‘name’ => ‘question’,
‘type’ => ‘string’
},
{
‘name’ => ‘tags’,
‘type’ => ‘string’
},
Jason
06:08 AMJason
06:09 AMname
in your documents...A
06:09 AMJason
06:09 AMnew Vue({
el: '#app',
data: {
searchClient: typesenseInstantsearchAdapter.searchClient,
item: {}
}
})
Jason
06:09 AMA
06:10 AMA
06:10 AMA
06:10 AMJason
06:11 AMJason
06:11 AMA
06:12 AMA
06:12 AMA
06:12 AMJason
06:15 AM[email protected]/dist/vue-instantsearch.js
- that's a really old version of vue-instantsearch!Jason
06:15 AMA
06:16 AMA
06:16 AMA
06:17 AMJason
06:17 AMJason
06:19 AMA
06:20 AMA
06:20 AMJason
06:20 AMA
06:20 AMA
06:20 AMA
06:20 AMJason
06:20 AMJason
06:21 AMA
06:21 AMJason
06:30 AMTypesense
Indexed 3015 threads (79% resolved)
Similar Threads
Troubleshooting Typesense Setup and Understanding Facets and Keywords
Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.
Issues with Typesense Frontend Search Integration
Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.
Connecting React Instant Search with Typesense Adapter
KARTHICK sought help with an error when using Typesense Adapter for React Instant Search. Jason advised substituting import statements. After uninstalling the react-instantsearch-dom package, KARTHICK resolved the issue.
Contributing to project using JS, TS, Go and PHP
Matthew volunteered to contribute to the project using JavaScript, Typescript, Go, and PHP. Jason assigned two tasks, including Laravel integration and nest.js library. hi019 encouraged Matthew to try out the Laravel integration.
Troubleshooting TypesenseInstantSearchAdapter without Node.js
John wanted to use TypesenseInstantSearchAdapter without Node.js. Jason helped by instructing to reference dist files directly, then fixing a bug that caused errors when doing so.