Not working in SvelteKit

[Dan503]

This is SvelteKit: https://kit.svelte.dev/

This is my svelte.config.js file

import adapter from '@sveltejs/adapter-auto'
import preprocess from 'svelte-preprocess'
import { svelteSVG } from 'rollup-plugin-svelte-svg'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter(),
        vite: () => ({
            plugins: [svelteSVG({ svgo: {}, enforce: 'pre' })],
        }),
    },
}

export default config

I'm importing it like this in a svelte file:

<script>
    import ArrowRight from '../../icons/arrow-right.svg'
</script>

I am getting this error though:

<ArrowRight> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[MKRhere]

I was able to reproduce it, but still investigating why this could happen.

[notsidney]

It works for me on SvelteKit 1.0 by adding it to the Vite config instead:

import { sveltekit } from '@sveltejs/kit/vite';
import { svelteSVG } from 'rollup-plugin-svelte-svg';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [
        sveltekit(),
        svelteSVG({
            svgo: {
                plugins: [
                    {
                        name: 'preset-default',
                        params: {
                            overrides: {
                                removeViewBox: false,
                            },
                        },
                    },
                    'removeXMLNS',
                ],
            },
            // https://vitejs.dev/guide/api-plugin.html#plugin-ordering
            enforce: 'pre',
        }),
    ],
};

export default config;

[MKRhere]

Thank you @notsidney! I'll update the README.