#community-help

Troubleshooting TypesenseInstantSearchAdapter without Node.js

TLDR 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.

Powered by Struct AI

5

1

1

1

May 17, 2021 (33 months ago)
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:02 PM
Hey everyone, my catalog is ready on the Typesense Cloud Server and I started implementing the frontend part following https://github.com/typesense/typesense-instantsearch-adapter. Except I cannot use node.js... Is it possible to use the TypesenseInstantSearchAdapter without node.js or not?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:05 PM
John If I understand you correctly, you essentially don't want to use npm to bundle things, correct?

If so, you can just use the adapter standalone using the files in the dist directory. Here's a direct link to a file you can add within your script tag on the FE: https://cdn.jsdelivr.net/npm/typesense-instant[email protected]/dist/typesense-instantsearch-adapter.min.js
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:09 PM
In fact I am trying to follow the example given here: https://github.com/typesense/typesense-instantsearch-demo - does this example still apply?

1

11:10
John
11:10 PM
(The server I am on does not have and cannot have node.js)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:12 PM
You technically don't need node.js on the server. All you need is node.js in your developer environment. You'd use something like webpack to build on your local machine or CI server and push the final bundled JS file to your server
11:13
Jason
11:13 PM
That example does use node / npm - but even that's something you only need to run on your local machine
11:13
Jason
11:13 PM
To deploy, you'd run npm run build on your local machine and put the contents of the dist folder in your web servers public directory
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:14 PM
OK, got it...
11:15
John
11:15 PM
Thanks Jason!

1

11:28
John
11:28 PM
Ah, just one more thing Jason: I actually tried to use the files:
• typesense-instantsearch-adapter.min.js
• typesense-instantsearch-adapter.min.js.map
from https://github.com/typesense/typesense-instantsearch-adapter/tree/master/dist
But I was getting various errors. Would these 2 files be sufficient or not?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:29 PM
It should be sufficient... What errors did you see?
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:32 PM
Here is my search.html page
11:33
John
11:33 PM
And my app.js
11:33
John
11:33 PM
After about one hour of trials that did not work...
11:34
John
11:34 PM
This is where I abandoned - it still does not work...
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:41 PM
So you are using npm... Could you replicate this issue on say codesandbox.io, by uploading your project there? It would be easier to debug that way
11:42
Jason
11:42 PM
Also, do you see the same error when you clone this repo: https://github.com/typesense/typesense-instantsearch-demo and just run:

$ npm install
$ npm run typesenseServer
$ npm run populateTypesenseIndex
$ npm start
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:47 PM
No, I am not using npm... I must have done some mistakes then - what am I doing wrong since I do not want to use it?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:49 PM
> import TypesenseInstantSearchAdapter from './TypesenseInstantsearchAdapter.js';
This is only supported with a bundler like parcel / webpack (npm)
11:49
Jason
11:49 PM
You want to remove that import line
11:49
Jason
11:49 PM
And then in index.html add a new script tag, that includes typesense-instantsearch-adapter.min.js
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:55 PM
I had tried this - retried it now:

app.js:4 Uncaught ReferenceError: TypesenseInstantSearchAdapter is not defined
at app.js:4
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:56 PM
Did you add the script tag to index.html? Could you share the exact tag you added?
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:56 PM
<script src="typesense-instantsearch-adapter.min.js"></script>
<script type="module" src="./app.js"></script>
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:57 PM
And typesense-instantsearch-adapter.min.js is on your local machine yeah? And you see no console 404 errors for that file?
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:59 PM
I am working directly on my server. All files are there
11:59
John
11:59 PM
No 404
May 18, 2021 (33 months ago)
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
12:02 AM
This is my full setup
12:33
John
12:33 AM
I would be very grateful if you could have a quick look, since it "should work"...
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
12:33 AM
Yup, I'm looking into it

1

12:56
Jason
12:56 AM
Found the issue. There was a build bug with the file in the dist directory, which I'm pushing a fix for shortly.

1

John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
01:00 AM
Great! Thanks Jason!
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
01:02 AM
Sure!

1

01:04
John
01:04 AM
Great, it works now!👏

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
01:04 AM
Awesome! Thank you for helping catch that. Somehow that build in dist directory broke between webpack upgrades...

1

1

John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
01:05 AM
No worries, 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

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.

2

52
14mo

Issue with Typesense Instantsearch and Upgrading to React 18

Carl experienced problems updating packages for a project. VIVEK suggested disabling reactStrictMode, while Jason insisted on downgrading to React 17 due to compatibility issues. Carl eventually found a workaround.

6
17mo

Resolving Typesense Setup Issues with VueJS

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.

4

87
31mo

Implementing State Export Feature Using Typesense InstantSearch.js on Node.js Backend

Kyle needed help passing search state to backend for implementing an "Export" feature, while using Typesense InstantSearch. Jason provided multiple solutions including advice on using Typesense InstantSearch adapter. The issue was resolved after some iteration.

1

10
28mo

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.

2

24
29mo