Closed multiplehats closed 1 year ago
Hi @multiplehats, sorry for the late reply !
First of all, thanks for the kind words 😄
I was able to reproduce the issue, the conditions seem to be the following :
pnpm
as a package managerinstantsearch.js
in ssr.noExternal
in vite.config.js
vite
's serve
/dev
commandThere is no issue while using yarn
, my guess is that there's an issue with vite
where because of the way pnpm
handles node_modules
, @algolia/events
is not detected as a CJS package so instantiateModule
gets called and fails as it's not ESM.
It would perhaps be good to open an issue on their side.
So for now there are two workarounds :
pnpm
😅vite.config.js
:
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig(({ command }) => ({ plugins: [sveltekit()], ssr: { noExternal: command === "build" ? ["instantsearch.js"] : [], }, }));
I'll update the README file to warn about this issue with `pnpm` !
Thanks a lot 😃
Hi @multiplehats, sorry for the late reply !
First of all, thanks for the kind words 😄
I was able to reproduce the issue, the conditions seem to be the following :
- Using
pnpm
as a package manager- Having
instantsearch.js
inssr.noExternal
invite.config.js
- Running
vite
'sserve
/dev
commandThere is no issue while using
yarn
, my guess is that there's an issue withvite
where because of the waypnpm
handlesnode_modules
,@algolia/events
is not detected as a CJS package soinstantiateModule
gets called and fails as it's not ESM. It would perhaps be good to open an issue on their side.So for now there are two workarounds :
- Use another package manager than
pnpm
😅- Use the following
vite.config.js
:import { sveltekit } from "@sveltejs/kit/vite"; import { defineConfig } from "vite"; export default defineConfig(({ command }) => ({ plugins: [sveltekit()], ssr: { noExternal: command === "build" ? ["instantsearch.js"] : [], }, }));
I'll update the README file to warn about this issue with
pnpm
!Thanks a lot 😃
Likewise, sorry for the late reply. I ended up implementing Algolia myself, but just ditched efforts for server side. I just pass the InstantSearch
to InstantSearch widgets.
<script lang="ts">
import { Toggle } from '$components/kit';
import type { InstantSearch } from 'instantsearch.js';
import { connectToggleRefinement } from 'instantsearch.js/es/connectors';
import type { ToggleRefinementRenderState } from 'instantsearch.js/es/connectors/toggle-refinement/connectToggleRefinement';
import { onMount } from 'svelte';
export let search: InstantSearch;
export let attribute = '';
export let on = true;
export let label = '';
let value: ToggleRefinementRenderState['value'];
let refine: (arg0: any) => any;
onMount(() => {
const customToggleRefinement = connectToggleRefinement((params) => {
({ value, refine } = params);
});
search.addWidgets([
customToggleRefinement({
attribute: attribute,
on
})
]);
});
</script>
{#if value && value.onFacetValue.count}
<Toggle
{...$$restProps}
checked={value.isRefined}
on:change={() => refine({ isRefined: value.isRefined })}
>
{label}
<span class="text-xs text-gray-600"> ({value.onFacetValue.count}) </span>
</Toggle>
{/if}
I tweeted the other day how little SvelteKit is used in the Algolia ecosystem.
Hey there,
Thanks for working on this! SvelteKit's ecosystem deserves more love, and this is a wonderful contribution.
I'm getting an error when importing any of the components in this lib. And I was wondering how you'd solved it, I don't see anything specific in this codebase apart from the
ssr
in thevite.config
.This traces back to
@algolia/events
, which usesmodule.exports = EventEmitter;
.My package.json
Tried adding
"events": "^3.3.0",
, but no luck as well..