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.