[@algolia/ui-components-horizontal-slider-js] `horizontalSlider` not working with `recommend-js` in UMD

[sarahdayan]

Description

When using ui-components-horizontal-slider-js with recommend-js and both libraries are loaded in UMD, they both import their own bundled version of Preact. Even if the version is the same, the fact that each function uses a different instance of Preact breaks the app.

Reproduction

Preview →

Steps

1. Visit the sandbox
2. See the runtime error

Expected behavior

The app should run normally.

Suggested fix

If recommend-js was providing createElement and Fragment in view and that ui-components-horizontal-slider-js accepted a renderer (like autocomplete-js) we could bind the same instance of Preact, which should work.

Environment

• OS: macOS Monterey 12.3.1
• Browser: Firefox 99.0.1
• Library version: @algolia/ui-components-horizontal-slider-js 1.0.0 / @algolia/recommend-js 1.3.0

[Wrubble]

Hello !

Did any body came up with a solution ? I'm experiencing the same behavior with recommend-js, the documentation indicates :

The horizontalSlider UI component is currently not supported with recommend-js when imported as a UMD bundle
https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/relatedProducts/#param-view

I couldn't find a workaround for now.

Environment

OS: Windows 11
Browser: Chrome 121.0.6167.162
Library version: @algolia/ui-components-horizontal-slider-js@1.2.2

[Haroenv]

The workaround for now is using a bundler or similar instead of UMD. Sorry!

[Wrubble]

No problem, I eventually managed to display my algolia recommendations in a Swiper.js slider.
Thanks for your answer !