poppa / sveltekit-svg

SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls
MIT License
229 stars 23 forks source link

<SVGComponent> is not a valid SSR Component #65

Open binmalyi opened 1 day ago

binmalyi commented 1 day ago

I've seen similar issues and followed up on them but they get me nowhere to the solution of the issue.

vite.config.js

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

export default defineConfig({
    plugins: [sveltekit(), svg({includePaths: ["./static/svg/", "./src/lib/components/"]})],
    server: {
        fs: {
            allow: ["public/", "src/", "static/"]
        }
    }
});

svelte.config.js

const config = {
    preprocess: vitePreprocess(),
    compilerOptions: {
        hydratable: true,
        immutable: true,
        css: "external"
    },
    kit: {
        adapter: adapter(),
        alias: {
            "public": "./public",
            "database": "./src/database",
            "utils": "./src/utils"
        },
        files: {
            appTemplate: "public/app.html"
        }
    }
};

Test.svelte

<script lang="ts">
    import Offline from "/svg/offline.svg?component";
</script>

<Offline />

package.json

{
"devDependencies": {
    "@sveltejs/adapter-auto": "^3.2.5",
    "@sveltejs/kit": "^2.5.28",
    "@sveltejs/package": "^2.3.5",
    "@sveltejs/vite-plugin-svelte": "^3.1.2",
    "pg": "^8.13.0",
    "publint": "^0.1.16",
    "svelte": "^4.2.19",
    "svelte-check": "^3.8.6",
    "typescript": "^5.6.2",
    "vite": "^5.4.7"
  }
}
poppa commented 17 hours ago
    import Offline from "/svg/offline.svg?component";

It doesn't look correct to start an import with a "/"!