Doc: Add SvelteKit integration note for vite.ssr.noExternal

[psegarel]

Change Type

Addition

Proposed Changes

Problem Description:

When using svelte-sonner in a standard SvelteKit project, the build process fails during development with the following error:

Unknown file extension ".svelte" for .../node_modules/svelte-sonner/dist/Icon.svelte

This happens because svelte-sonner ships raw .svelte files, but the default Vite configuration in SvelteKit does not process .svelte files from the node_modules directory.

Proposed Solution:

This issue is resolved by explicitly telling Vite to process svelte-sonner by adding it to ssr.noExternal in the svelte.config.js file.

It would be incredibly helpful for developers if this SvelteKit-specific integration step was mentioned in the documentation. A small note under the "Installation" or in a new "Usage with SvelteKit" section would save a lot of time and confusion.

I suggest adding the following snippet and explanation to the docs:

Usage with SvelteKit

If you are using svelte-sonner in a SvelteKit project, you may need to update your svelte.config.js to ensure Vite correctly bundles the component library. Add the vite.ssr.noExternal option to your config:

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    },
    vite: {
        ssr: {
            noExternal: ['svelte-sonner']
        }
    }
};

export default config;

This small addition would greatly improve the developer experience for SvelteKit users.

[chufucious]

Just had to do this for my SvelteKit project.

[MrMonkeyface]

Can confirm, same issue for me (implemented svelte-sonner in a SvelteKit project), @psegarel's solution did the job. I would also strongly encourage to include this solution into the docs, searching for it is consuming time unnecessarily.