Svelte 5 Support

[jakeanq]

I realise this is probably still rather early to be looking at this, but I am so I figure I'll put a ticket with my findings. I have patched it locally so there's no urgency on my part to get it fixed ;)

When using sveltekit-svg with Svelte 5.0.0-next.26, compilation fails with the following error:

Failed reading SVG ".../svelte-site/src/resources/title.svg?component": Invalid compiler option: css: "none" is no longer a valid option. If this was crucial for you, please open an issue on GitHub with your use case. sr [CompileError]: Invalid compiler option: css: "none" is no longer a valid option. If this was crucial for you, please open an issue on GitHub with your use case.
    at ar (.../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:228490)
    at gS (.../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:627312)
    at .../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:624179
    at .../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:627031
    at .../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:626951
    at e.compile (.../svelte-site/node_modules/.pnpm/svelte@5.0.0-next.26/node_modules/svelte/compiler.cjs:1:642916)
    at TransformContext.transform (.../svelte-site/node_modules/.pnpm/@poppanator+sveltekit-svg@4.1.3_svelte@5.0.0-next.26_svgo@3.1.0_vite@5.0.10/node_modules/@poppanator/sveltekit-svg/dist/index.js:112:55)
    at async Object.transform (file://.../svelte-site/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:63705:30)
    at async loadAndTransform (file://.../svelte-site/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:49386:29)
    at async Object.warmupRequest (file://.../svelte-site/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:60017:13) {
  filename: '.../svelte-site/src/resources/title.svg?component',
  position: undefined,
  start: undefined,
  end: undefined,
  code: 'invalid-compiler-option'
}

Changing css: 'none', to css: 'external', fixes the compile issue and generally seems to work (the SVG is rendered now), although it now has a couple of warnings:

`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
The hydratable option has been removed. Svelte components are always hydratable now.
Sourcemap for ".../svelte-site/src/resources/title.svg" points to missing source files

(the last one is for the specific SVG I am importing, but applies more generally)

[poppa]

I've released a beta with Svelte 5 support (hopefully). Test it and check if it works.

npm i -D @poppanator/sveltekit-svg@svelte5

[jakeanq]

This seems to be working almost perfectly, thanks!

The only minor issue is that I still get this warning:

Sourcemap for ".../svelte-site/src/resources/title.svg" points to missing source files

Also I encountered #54 and temporarily worked around it by adding @rollup/pluginutils as a dev dependency as a comment on that ticket suggests.

[poppa]

I think this should now be fixed in 5.0.0-svelte5.2

[jakeanq]

That works for me!

[silvestrevivo]

@poppa thanks so much for the update to Svelte5!

[pyrossh]

Trying to install it with the rc version svelte@"^5.0.0-next.123" seems to be failing with this error, npm i -D @poppanator/sveltekit-svg@svelte5

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: website@0.0.1
npm ERR! Found: svelte@5.0.0-next.123
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^5.0.0-next.123" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@">=5.x" from @poppanator/sveltekit-svg@5.0.0-svelte5.2
npm ERR! node_modules/@poppanator/sveltekit-svg
npm ERR!   dev @poppanator/sveltekit-svg@"5.0.0-svelte5.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

[poppa]

Trying to install it with the rc version svelte@"^5.0.0-next.123" seems to be failing with this error, npm i -D @poppanator/sveltekit-svg@svelte5 [...]

Thanks for the report @pyrossh . This should now be fixed in v5.0.0-svelte5.3. If you still get the error, please re-open #57

[pyrossh]

@poppa Thanks it works now.

[dcsan]

I'm still seeing

Failed reading SVG "....bmc.svg": Invalid compiler option: css: "none" is no longer a valid option.

with

"svelte": "5.0.0-next.242",
"@poppanator/sveltekit-svg": "^4.2.1",

is there a way to pass a css fill to the SVG to prevent the warning?

also i'm wondering if the config options in the readme here are not ready for 5.0 of sveltekit? I'm wondering where the plugins would go then? I

const config = {
    preprocess: vitePreprocess(),
    kit: { ...  },
    // put here for now but not sure? at least no error on startup
    plugins: [
        svg(), // Options are optional
    ],

[poppa]

I'm still seeing ...

"svelte": "5.0.0-next.242",
"@poppanator/sveltekit-svg": "^4.2.1",

You need to install the version 5 package of this plugin, e.g. the svelte5 tag: npm i -D @poppanator/sveltekit-svg@svelte5 @dcsan