Error using in SvelteKit?

[kenjonespizza]

Hi @janosh !

It's amazing that you made this package! I however can't get it to work with SvelteKit. I made a minimal site from scratch to replicate the issue: https://github.com/kenjonespizza/svelteKit-svelte-algolia-test (I kept the .env in there to assist). the site builds without error, but errors out in Dev mode.

The Error
It's one of those SvelteKit SSR Module errors I've seen times before but can never figure out how to actually fix, since the problem seems to be with the external package. I also messed around with the Vite config options... but once again can't find one that solved this for me. Below is a log of the main issue. Also attached is an image of my terminal log incase that easier to read.

[vite] Error when evaluating SSR module /node_modules/.pnpm/algoliasearch@4.12.0/node_modules/algoliasearch/lite.js?v=f431d156: ReferenceError: module is not defined

Thanks!

[janosh]

@kenjonespizza Thanks for the reproduction and the detailed analysis. I've encountered this error a few times myself in the past. It was usually enough to add one of these to svelte.config.js

vite: {
  optimizeDeps: {
    exclude: ["algoliasearch"],
  },
  ssr: {
    noExternal: true,
  },
},

Just tried it on your repo and didn't help.

This must have broken quite recently as I use svelte-algolia on a bunch of my own SvelteKit sites (ocean-artup, afara, sbs). I just updated all deps on one of them and indeed it started breaking same as your repo. So error is likely due to a change in SvelteKit's dependency handling. I guess the easiest fix would be to load algoliasearch/lite in a script tag from CDN rather than as a module since module handling still seems so much in flux.

[kenjonespizza]

Thanks @janosh ! I was hoping a SvelteKit update was the culprit and not me, since I had seen it working on your sites. I even attempted matching your "svelte" and "@sveltejs/kit" versions in the package.json and still no dice.

I don't currently need this for a project, but will likely keep tinkering. 👍

[janosh]

I don't currently need this for a project, but will likely keep tinkering. 👍

Good to know. Back from work now and had another look at it.

As expected, everything works fine if I replace

import algoliasearch from 'algoliasearch/lite.js'

with

<svelte:head>
  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script>
</svelte:head>

in Search.svelte. Happy to release a version with that fix, if you like.

[kenjonespizza]

Oh cool.

Completely up to you sir if you want to release that. I'd be more than happy with it, but I want it to bring you joy, whereas it's just a temporary workaround. Maybe it maks since to put it behind a flag/option, OR maybe that just convolutes a decision the user shouldnt need to make?

My vote is to go ahead and push the fix :) . Thanks for being amazing and hopping in to this so quickly!

[janosh]

Turns out there's an easier way to fix this. Instead of relying on the package structure when importing algoliasearch/lite we can use algoliasearch/dist/algoliasearch-lite.esm.browser directly. At least for the time being. Published a fix in v0.2.13 and opened an issue over at algolia/algoliasearch-client-javascript#1381 to hopefully turn this into a cleaner solution down the road.

[janosh]

From initial testing, it looks like updating to vite v3 obviates the need for the weird import path algoliasearch/dist/algoliasearch-lite.esm.browser.