Error in bundling InstantSearch with Svelte/Rollup

I am trying to get Algolia InstantSearch.js working with my Svelte website. I get the following error when I try to deploy this on Netlify, I get the following error:

9:27:35 PM: [vite]: Rollup failed to resolve import "instantsearch.js/es/widgets.js" from "src/components/Search/SearchSection.svelte".
9:27:35 PM: This is most likely unintended because it can break your application at runtime.
9:27:35 PM: If you do want to externalize this module explicitly add it to
9:27:35 PM: `build.rollupOptions.external`
9:27:35 PM: > [vite]: Rollup failed to resolve import "instantsearch.js/es/widgets.js" from "src/components/Search/SearchSection.svelte".
9:27:35 PM: This is most likely unintended because it can break your application at runtime.
9:27:35 PM: If you do want to externalize this module explicitly add it to
9:27:35 PM: `build.rollupOptions.external`

This is how I import those modules in my component:

import algoliasearch from 'algoliasearch/lite.js';
import instantsearch from 'instantsearch.js';
import { searchBox, hits, index } from 'instantsearch.js/es/widgets.js';

This is my svelte.config.js:

import fs from "fs";
import path from "path";
import adapterStatic from "@sveltejs/adapter-static";
import svg from "vite-plugin-svgstring";
import dsv from "@rollup/plugin-dsv";
import sveltePreprocess from "svelte-preprocess";
import autoprefixer from "autoprefixer";
import { indexAlgolia } from 'svelte-algolia/server-side'
import 'dotenv/config' // optional

const { thedivtagguy } = JSON.parse(fs.readFileSync("package.json", "utf8"));
const dev = process.env.NODE_ENV === "development";
const dir = thedivtagguy ? thedivtagguy.subdirectory : "";
const prefix = dir.startsWith("/") ? "" : "/";
const base = dev || !dir ? "" : `${prefix}${dir}`;

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [autoprefixer]
  }
});

const config = {
  preprocess,
  kit: {
    adapter: adapterStatic(),
    target: "#svelte",
    vite: {
      resolve: {
        alias: {
          $actions: path.resolve("./src/actions"),
          $components: path.resolve("./src/components"),
          $data: path.resolve("./src/data"),
          $stores: path.resolve("./src/stores"),
          $styles: path.resolve("./src/styles"),
          $svg: path.resolve("./src/svg"),
          $utils: path.resolve("./src/utils")
        }
      },
      plugins: [dsv(), svg()],
    },
    paths: {
      base
    }
  }
};

export default config;

This is rollup.config.js:

import sveltePreprocess from "svelte-preprocess";
import svelte from "rollup-plugin-svelte";
import geojson from 'rollup-plugin-geojson';
import { mdsvex } from "mdsvex";
const production = !process.env.ROLLUP_WATCH;

preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [require("tailwindcss"), require("autoprefixer")]
  }
});

export default {
  plugins: [
    svelte({
			// tell svelte to handle mdsvex files
			extensions: [".svelte", ".svx"],
			preprocess: mdsvex()
		}),
    geojson()
  ],
};

How and where exactly do I “externalize this module explicitly”? I can’t find any good documentation for this.

Hello!

According to the Rollup documentation (which Vite is using under the hood), you should be able to add something like so to your vite.config.js:

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      external: [
        "algoliasearch",
        "instantsearch.js"
      ],
    },
  },
  ...
});

If you are able to share your code repository it will help us debug your issue and try to help you find a solution. Thanks!