#community-help

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.

Powered by Struct AI

1

1

1

1

Jul 09, 2021 (31 months ago)
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:13 AM
trying to set up typesense with the cdn vuejs implementation + adapter, but it’s not working — anything wrong with my setup?

https://pastebin.com/gsLEXH7D
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:17 AM
You’d need to initialize vue-instantsearch this way: https://github.com/typesense/typesense-instantsearch-adapter#with-vue-instantsearch

And remove the current instantsearch initialization lines which is only for instantsearch.js (Lines 37-57)
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:21 AM
Does the order of imports matter?
05:21
A
05:21 AM
05:21
A
05:21 AM
i have typesense’s adapter first, then vue, then the vue-instantsearch
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:23 AM
You’d want to vue-instantsearch imported first
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:25 AM
i’ve imported and followed that guide to a T but it says Uncaught SyntaxError: export declarations may only appear at top level of a module
05:26
A
05:26 AM
offending line in question is
05:26
A
05:26 AM
import TypesenseInstantSearchAdapter from “typesense-instantsearch-adapter”;
05:26
A
05:26 AM
i do not want to install vue or any js tooling, just use it as a cdn if that makes sense
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:27 AM
The import lines are not needed if you’re adding script tags
05:30
Jason
05:30 AM
Hang on there's more vue-specific initialization still needed in your snippet. Let me modify your snippet and post shortly
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:37 AM
is it not in the documentation?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:39 AM
The documentation assumes the presence of JS tooling and single file components in vue, so it takes a tiny bit of tweaking
05:40
Jason
05:40 AM
Key changes I did: removed the script tag on top which was using instantsearch.js specific initialization (which is not needed for vue-instantsearch).

Then 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
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:46 AM
okay, that first error is gone
05:46
A
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>
05:46
A
05:46 AM
however, its saying item is undefined
05:47
A
05:47 AM
but the index has been passed in on line 9 which is multiple_choice_questions
05:47
A
05:47 AM
is it not able to detect the items of the index automatically?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:48 AM
&gt; its saying item is undefined
Which line is this?
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:49 AM
<ais-hits>
        <div slot="item" slot-scope="{ item }">
          <h2>{{ item.name }}</h2>
        </div>
      </ais-hits>

05:50
A
05:50 AM
11-14
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:50 AM
Is it erroring out on item.name or { item }?
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:51 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. (found in &lt;Root&gt;)

[Vue warn]: Error in render function: “TypeError: item is undefined” (found in &lt;Root&gt;)

TypeError: item is undefined
05:52
A
05:52 AM
it’s showing new Vue({ as the source of the error :thinking_face:
05:53
A
05:53 AM
how anyone does JS for a living is beyond me

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:53 AM
Could you try changing &lt;div slot="item"...&gt; to &lt;template slot="item"...
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
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"
05:55
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
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:56 AM
Ok good, if that had worked, I would have questioned by little understanding of vue!
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:56 AM
vue, react, angular, es6, ts (not typesense 😆 ) its all alien to me
05:57
A
05:57 AM
kudos to you guys for building an entire adapter

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:58 AM
Could you try &lt;h2&gt;@{{ item.name }}&lt;/h2&gt;
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
05:59 AM
nope, nothing
05:59
A
05:59 AM
same errors
06:00
A
06:00 AM
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:00 AM
How about &lt;h2&gt;${item.name}&lt;/h2&gt;?
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:00 AM
Changes to this
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:01 AM
Question, what backend framework are you using?
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:01 AM
ruby and rails

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:02 AM
Fellow Ruby fan here!
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:02 AM
i love ruby, JS i can’t stand
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:02 AM
Anyway, that @syntax is apparently needed for when using Laravel, so figured I'd ask
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:02 AM
i assumed it would be a few minutes of set up to do a CDN search connected to typesense but here we are
06:02
A
06:02 AM
because i have a typesense cluster
06:03
A
06:03 AM
i have the api keys and whatnot
06:03
A
06:03 AM
its just crying about item whatever that is
06:03
A
06:03 AM
i currently have a 10k LOC JS file for each typesense index i want to search - its disgusting but works
06:04
A
06:04 AM
if this item thing gets resolved i can delete 60k LOC from my app lol
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:04 AM
Oh wow!
06:04
Jason
06:04 AM
Something about the script tag way of initializing things is what's messing things up...
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:05 AM
is it the order of scripts?
06:05
A
06:05 AM
or do i need to double check the naming of the key/values in the index
06:06
A
06:06 AM
part of my schema

schema = {
‘name’ =&gt; ‘multiple_choice_questions’,
‘fields’ =&gt; [
{
‘name’ =&gt; ‘id’,
‘type’ =&gt; ‘string’
},
{
‘name’ =&gt; ‘question’,
‘type’ =&gt; ‘string’
},
{
‘name’ =&gt; ‘tags’,
‘type’ =&gt; ‘string’
},
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:08 AM
This is a vue / vue-instantsearch thing... Not related to the backend
06:09
Jason
06:09 AM
Although, you'd want it it to be {{ item.question }}, since there's name in your documents...
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:09 AM
yeah i figured. definitely clueless on this
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:09 AM
new Vue({
    el: '#app',
    data: {
      searchClient: typesenseInstantsearchAdapter.searchClient,
      item: {}
    }
  })
06:09
Jason
06:09 AM
Could you try that ^
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:10 AM
no change
06:10
A
06:10 AM
same error as last time
06:10
A
06:10 AM
“did you register the component correctly?”
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:11 AM
Oh let's revert back to {{ }} syntax
06:11
Jason
06:11 AM
In addition to adding item: {} to data
06:12
A
06:12 AM
this is what i have
06:12
A
06:12 AM
and the current error is saying “did you register the component?”
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:15 AM
Oh wait, [email protected]/dist/vue-instantsearch.js - that's a really old version of vue-instantsearch!
06:15
Jason
06:15 AM
Latest is 3.7.0
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:16 AM
that did this..
06:16
A
06:16 AM
replacing 0.2 with 3.7.0
06:17
A
06:17 AM
nice eye, completely failed to see that
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:17 AM
Ok progress!
06:19
Jason
06:19 AM
Could you upgrade to vue 2.6.14 for good measure?
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:20 AM
it worked!
06:20
A
06:20 AM
its showing
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:20 AM
🎉 🎉
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:20 AM
thank you soooo much man
06:20
A
06:20 AM
deeply appreciate it
06:20
A
06:20 AM
you have a loyal customer in me
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:20 AM
Happy to help! :D
06:21
Jason
06:21 AM
Btw, could you post your original snippet/question in Github issues? I'd like to add my response publicly for others who might stumble into this
A
Photo of md5-98c72c3023867be0346b48ae4cb22001
A
06:21 AM
yes, can you send me the link or repo in which to post it?
06:30
Jason
06:30 AM
Thank you!

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3015 threads (79% resolved)

Join Our Community

Similar Threads