module is not defined - Githubissues

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 the vite.config.

Internal server error: module is not defined
      at eval (/node_modules/.pnpm/@algolia+events@4.0.1/node_modules/@algolia/events/events.js:28:1)
      at instantiateModule (file:///Users/jayden/Code/personal/project/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:15)
ReferenceError: module is not defined
    at /node_modules/.pnpm/@algolia+events@4.0.1/node_modules/@algolia/events/events.js:26:1
    at instantiateModule (file:///Users/jayden/Code/personal/project/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:15)

This traces back to @algolia/events, which uses module.exports = EventEmitter;.

My package.json

{
    "name": "project",
    "description": "A SvelteKit project",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev --port 3000",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-vercel": "^2.0.4",
        "@sveltejs/kit": "^1.8.3",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.9",
        "@trivago/prettier-plugin-sort-imports": "^4.0.0",
        "@types/events": "^3.0.0",
        "@types/lodash-es": "^4.17.6",
        "@typescript-eslint/eslint-plugin": "^5.53.0",
        "@typescript-eslint/parser": "^5.53.0",
        "@unpic/svelte": "^0.0.4",
        "autoprefixer": "^10.4.13",
        "clsx": "^1.2.1",
        "dayjs": "^1.11.7",
        "eslint": "^8.34.0",
        "eslint-config-prettier": "^8.6.0",
        "eslint-plugin-svelte": "^2.19.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "lodash-es": "^4.17.21",
        "lucide-svelte": "^0.112.0",
        "postcss": "^8.4.21",
        "prettier": "^2.8.4",
        "prettier-plugin-svelte": "^2.9.0",
        "prettier-plugin-tailwindcss": "^0.2.3",
        "svelte": "^3.55.1",
        "tailwind-merge": "^1.10.0",
        "tailwindcss": "^3.2.7",
        "tslib": "^2.5.0",
        "typescript": "^4.9.5",
        "vite": "^4.1.3",
        "vite-tsconfig-paths": "^4.0.5"
    },
    "type": "module",
    "dependencies": {
        "algoliasearch": "^4.14.3",
        "algoliasearch-helper": "^3.11.2",
        "instantsearch.js": "^4.49.4",
        "svelte-algolia-instantsearch": "^0.7.0",
                  "events": "^3.3.0",
    }
}

Tried adding "events": "^3.3.0",, but no luck as well..

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 in ssr.noExternal in vite.config.js
Running vite's serve/dev command

There 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 :

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 😃

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 in ssr.noExternal in vite.config.js

Running vite's serve/dev command

There 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 :

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.

aymeric-giraudet / svelte-algolia-instantsearch

module is not defined #8