Error: <Btn_Next> is not a valid SSR component.

[freeo]

I have this line in one of my svelte components:

<script type="ts">
import Btn_NEXT from '$lib/assets/btn_NEXT.svg?component';
</script>
...
<Btn_NEXT fill="{fill}" class="{imgClass}" />

So I plan to use this SVG as a component and change some properties dynamically.

As soon as I have a non-empty svgoOptions (see below later) in my vite.config I first get this warning:

[WARNING]: Type ".../src/lib/assets/btn_NEXT.svg?component" can not be imported as a Svelte component since "datauri" is set in vite.config

Then, it throws this error:

Error: <Btn_NEXT> 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. Otherwise you may need to fix a <Btn_NEXT>.

I searched through your code and logged svgo:

            let svgo = options.svgoOptions;
            let isSvgoDataUri = false;
            console.log(svgo)
            if (svgo && typeof svgo === 'object') {
                if (svgo.datauri) {
                    isSvgoDataUri = true;
                }
            }
            if (isSvgoDataUri && type === 'component') {
                console.warn(`[WARNING]: Type "${id}" can not be imported as a Svelte component ` +
                    `since "datauri" is set in vite.config`);
            }

Output:

{
  plugins: [ { name: 'preset-default', params: [Object] } ],
  datauri: 'base64'
}

But I fail to see if I can do anything about it. svgo will write base64 in any case and it can't be empty. I havn't been setting datauri, just defaults. Here's what my vite.config looks like:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import svg from '@poppanator/sveltekit-svg';

export default defineConfig({
    plugins: [
        sveltekit(),
        svg({
            svgoOptions: {
                datauri: false,
                plugins: [
                    { name: 'preset-default', params: { overrides: { removeViewBox: false } } },
                    'removeDimensions'
                ]
            }
        })
    ],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

Again: If svgoOptions is empty, vite runs just fine, but without those options sveltekit-svg looses its value for me.

Full stacktrace: https://pastebin.mozilla.org/oBB5Ezmn

package.json excerpt

        "@poppanator/sveltekit-svg": "^3.0.0",
        "svelte": "^3.54.0",
        "@sveltejs/kit": "^1.5.0",
        "tailwindcss": "^3.2.7",
        "typescript": "^4.9.3",
        "vite": "^4.0.0",

What am I missing here? This seems to be the standard use case, right?!

[poppa]

Hi @freeo, and thanks for your feedback.

I've created a sample app with your settings at https://github.com/poppa/sveltekit-svg/tree/bugreport/33/bugreports/issue-33. This seems to work fine so I guess you have something else in your app that breaks things.

Please fork this repo, check out the branch above (issue/33), and adjust it to your app's settings until it breaks.

Thanks in advance.

[freeo]

Thank you @poppa

I've installed all my packages one by one to your new sample app, but I wasn't able to replicate the issue with that. I then looked at the versions of the packages: I was running @sveltejs/kit@1.12.0 opposed to 1.15.0 of your sample app. After upgrading sveltekit in my project the problem was basically gone - just had to fix some other minor issues which I don't fully understand. But I don't want to dig deeper considering this probably doesn't affect the current version. So I would consider this closed.

One other thing: I'm using @sveltejs/adapter-static. While I was still on 1.12.0 I changed back to adapter-auto, because of this SSR error: my project it worked! But this didn't matter in your sample app. It works in sveltekit 1.12.0 and 1.15.0 with @sveltejs/adapter-static

[freeo]

I was happy for about 20 minutes, and then I've just added another svg and everything exploded in my face - it triggered the exact same issue again:

[WARNING]: Type "/.../src/lib/assets/btn_NEXT.svg?component" can not be imported as a Svelte component since "datauri" is set in vite.config
Error: <Btn_IN> 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. Otherwise you may need to fix a <Btn_IN>.

Removing the new svg doesn't restore it, just plain broken in my project until I do some magic step, which was triggered by the sveltekit upgrade. Can't reproduce that...

[freeo]

I've committed all my packages and config to my fork of your sample app here:

https://github.com/freeo/sveltekit-svg/tree/bugreport/33/bugreports/issue-33

Again, I wasn't able to reproduce the issue. This is just for you to see my whole config.

[poppa]

Thanks a lot for the feedback @freeo

So, can I close this issue, or are you still having problems?

[freeo]

The issue is alive n' kickin'.

I've created a scrubbed version of my project, which replicates the error: https://github.com/freeo/sk-svg-issue-33

Unfortunately this uses a rather complex svg. I've tried replicating it with simpler ones, but it's veeery fickle... This contains all the btn and ico svg's, which threw the error before, but somehow they work fine now in this stripped down version.

Your test1.svg Avocado initially didn't work when I imported it in src/lib/components/Footer.svelte (I did most of the replication testing in this file). When I added the same svg in src/lib/components/Hero.svelte (commented out, but it's still there), it worked then in both the Header and the Footer. After removing the import from the Header, it continued to work in the footer. I couldn't replicate this behaviour with blackfriday.svg, so again, this is very fickle...

EDIT: Didn't read my output after a fresh clone correctly.... It actually fails at the regular buttons already: Btn_SHARE

[C-4PO]

Stumbling upon the issue myself in the latest version of svelte kit.

[poppa]

@freeo The problem you have is that the blackfriday.svg contains some <[CDATA[ ... ]]> sections, which Svelte doesn't handle. If you remove all <[CDATA[ and ]]> tags everything seems to work fine.

I've fixed (but not released yet) so that the plugin will detect cases this and warn about it.

[poppa]

@C-4PO I need more info.

[freeo]

@poppa Like I said, blackfriday.svg is an unfortunate example - I've had this issue with every svg in that repo, including your test1.svg and my btn....svg's, but I can't replicate it reliably. So this can't be just CDATA.

After running a fresh clone of my repo, didn't it throw an error on Btn_SHARE?

[poppa]

@freeo No, the only problem I have with your sample-repo is blackfriday.svg. When I removed <![CDATA[ ... ]]> from that file everything works fine. (Except for some image imports missing, but that's not related to this plugin)

These doesn't exist in the repo:

import ship from '$lib/assets/ship_construction.webp';
import timeline from '$lib/assets/timeline.webp';

[freeo]

@poppa Should I try replicate with Docker?

[poppa]

I just created a PR to your sample repo. Try that one out first and see if it works for you @freeo.

[freeo]

Your PR works for me. My project doesn't use CDATA svg's though, so guess I have to try replicate this wiggly issue in Docker.

[poppa]

What is the exact error you get?

[timfeid]

@freeo make sure the file exists and the svg is vaild. this is a common error when either of these things happen

this definition tells typescript what type it is but not if the file exists or is valid

[poppa]

Feel free to re-open this issue at any point.

[buhodev]

Might be a little late but I had the same issue due to an incorrect path for the icons inside the vite.config. Make sure it is pointing to your icons folder.