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/[email protected]/node_modules/svelte/compiler.cjs:1:228490)
    at gS (.../svelte-site/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.cjs:1:627312)
    at .../svelte-site/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.cjs:1:624179
    at .../svelte-site/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.cjs:1:627031
    at .../svelte-site/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.cjs:1:626951
    at e.compile (.../svelte-site/node_modules/.pnpm/[email protected]/node_modules/svelte/compiler.cjs:1:642916)
    at TransformContext.transform (.../svelte-site/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@poppanator/sveltekit-svg/dist/index.js:112:55)
    at async Object.transform (file://.../svelte-site/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:63705:30)
    at async loadAndTransform (file://.../svelte-site/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:49386:29)
    at async Object.warmupRequest (file://.../svelte-site/node_modules/.pnpm/[email protected]/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: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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

[madmoizo]

Svelte 5 is out! Time to release seveltekit-svg 5!

[poppa]

@madmoizo Okey dokey, so I've published v5 as the default package on NPM