#community-help

Resolve Prototype.js Interference With Typesense/InstantSearch Implementation

TLDR John reported an error after including Prototype.js library in their website, affecting the Typesense/InstantSearch implementation. Nick suggested avoiding the old library, but John couldn't due to it being required by Magento 1.9. Jason clarified the issue and suggested an upgrade. Upgrading to Prototype.js version 7.1 mitigated the issue according to John.

Powered by Struct AI

2

1

May 26, 2021 (32 months ago)
John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
04:49 PM
My website uses the prototype.js library - see http://prototypejs.org/

And as soon as I include this library it kills the Typesense/InstantSearch implementation, giving the error I pasted below.

Does anyone know how I could resolve this?

uniq.ts:2 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at uniq.ts:2
    at prototype.js:884
    at prototype.js:825
    at Array.forEach (<anonymous>)
    at Array.each (prototype.js:824)
    at Array.findAll (prototype.js:883)
    at le (uniq.ts:2)
    at prepareTemplateProps.ts:26
    at he (prepareTemplateProps.ts:60)
    at hits.tsx:42
Nick
Photo of md5-c816eda2a7af563aa54f2ae668f3a619
Nick
05:11 PM
Oof, that's an old library. My instinct says it may have something to do with the fact that prototype messes with a lot of built in types. If you are starting a new project it may be worth considering dropping prototype, as everything it offers can be done in vanilla js by now. If it's a legacy website, could you set up a minimal reproducible example somewhere, eg codepen or GitHub?

1

1

John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
10:27 PM
I won't be able to remove prototype.js easily... The site I am talking about runs under Magento 1.9, which depends on prototype.js unfortunately...
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:02 PM
John I just dug through that stack trace and I can confirm what Nick mentioned above is indeed the issue.

Instantsearch.js uses the Array.filter function and the modern JS implementation of it takes 3 parameters.

However, Prototype.js redefines Array.filter
globally as it's own 2-argument function and that causes InstantSearch.js to error out.

Not sure if this is helpful, but may be something like this might help prevent prototype polluting the global Array object: http://perrymitchell.net/article/stop-polluting-my-prototypes/

1

John
Photo of md5-7a0ab48aa8979a59e1d8c3919797c1f8
John
11:15 PM
Thanks Jason, very cool link! Now, my website was using prototype.js version 7.0. And upgrading to 7.1 resolved the issue (for now, since I haven't finished my implementation...)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:19 PM
Oh awesome!