How do I add modules to build.rollupOptions.external?

Question

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.

Rima

Answer 1

Did you tried using kit.vite.optimizeDeps.exclude in svelte.config.js

const config = {
  preprocess,
  kit: {
    // other options ....
    vite: {
      // other options ....
      optimizeDeps:{
        exclude: ['instantsearch.js']
      },
      // in case you want to interact with rollup you can use
       build:{
        rollupOptions:{
          
        }
      }
    }
  }
};

Zusman