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.