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

33mo

Join the chat

May 17, 2021 (33 months ago)

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?

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

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?

11:10

John

11:10 PM

(The server I am on does not have and cannot have node.js)

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

11:14 PM

OK, got it...

11:15

John

11:15 PM

Thanks Jason!

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

11:29 PM

It should be sufficient... What errors did you see?

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

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

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

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

11:55 PM

I had tried this - retried it now:

app.js:4 Uncaught ReferenceError: TypesenseInstantSearchAdapter is not defined
at app.js:4

Jason

11:56 PM

Did you add the script tag to index.html? Could you share the exact tag you added?

John

11:56 PM

<script src="typesense-instantsearch-adapter.min.js"></script>
<script type="module" src="./app.js"></script>

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

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

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

12:33 AM

Yup, I'm looking into it

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.

John

01:00 AM

Great! Thanks Jason!

Jason

01:01 AM

Alright, done! Could you use this file in your script tag: https://cdn.jsdelivr.net/npm/typesense-instantse[email protected]/dist/typesense-instantsearch-adapter.min.js

John

01:02 AM

Sure!

01:04

John

01:04 AM

Great, it works now!👏

Jason

01:04 AM

Awesome! Thank you for helping catch that. Somehow that build in dist directory broke between webpack upgrades...

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.

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.

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.

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.

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.

29mo