Using Rollup to bundle autocomplete.js

I’m trying to use autocomplete.js in my site where assets are bundled with Rollup, but I face an issue I’ve not been able to fix.

I’ve put the code in a branch in my GitHub repo: https://github.com/nhoizey/nicolas-hoizey.com/tree/algolia

Rollup config is there (a bit complicated, I generate both IIFE and ES versions, for multiple JS files, and also Sass… :sweat_smile:):

I use algoliasearch and autocomplete in

which is imported in

Rollup build runs perfectly.

But when I load a page in my site, I get this error in the console:

Uncaught TypeError: utils.mixin is not a function
    <anonymous> event_bus.js:22
event_bus.js:22:2
    <anonyme> event_bus.js:22
    InnerModuleEvaluation self-hosted:1861
    evaluation self-hosted:1832

It looks like utils.mixin uses zepto.extend when used standalone:

But I don’t have Zepto. Should I add it to my project?

Thanks.

I’ve been able to use autocomplete.js but:

  • I had to load Zepto, as it looks like it is required for the (not so) “standalone” version
  • I have not been able to bundle everything with my own JS code, so I had to load three script the old school way: zepto, algoliasearchLite, autocomplete.js

Here’s the code, if it can help others:

I guess it would be better being able to bundle and tree-shake, all of this, but I couldn’t.

Any advice welcome, thanks.

I moved my attempt to bundle Zepto, algoliasearchLite and autocomplete.js with Rollup in a branch:

Actually, that was not necessary, as I discovered later:

But still no progress on the Rollup part…