Irrelevant assets are incorrectly marked as SVG

[rbozan]

I think there is a bug somewhere in the code around determining whether an imported module is actually a SVG or not:

sveltekit-svg/src/index.ts

Lines 241 to 250 in 2d7b509

	if (isType(type, 'url')) {
	if (isDevelopmentMode()) {
	const msg = `"url" imports are not optimized in development mode`
	this.info({
	id,
	message: msg,
	})
	}
	return { code: source, map: null, meta: { isSvgUrl: true } }

I am loading .wav files using the following code before in Sveltekit which gets transformed to URLs so I can use them in an <audio> element:

<script>
	import hintAudio from '$lib/audio/hint.wav';
</script>
<audio src={hintAudio} bind:volume autoplay />

And for some reason in my recent builds the above import seems to trigger this plugin and returns me a svgo error during a production build.. Which is weird as it's completely unrelated to SVG.

#22 18.31 error during build:
#22 18.31 [sveltekit-svg] <input>:1:1: Non-whitespace before first tag.
#22 18.31     at sax.onerror (/app/node_modules/svgo/lib/parser.js:247:19)
#22 18.31     at emit (/app/node_modules/@trysound/sax/lib/sax.js:518:35)
#22 18.31     at error (/app/node_modules/@trysound/sax/lib/sax.js:549:5)
#22 18.31     at strictFail (/app/node_modules/@trysound/sax/lib/sax.js:573:7)
#22 18.31     at beginWhiteSpace (/app/node_modules/@trysound/sax/lib/sax.js:847:7)
#22 18.31     at SAXParser.write (/app/node_modules/@trysound/sax/lib/sax.js:902:11)
#22 18.31     at parseSvg (/app/node_modules/svgo/lib/parser.js:259:7)
#22 18.31     at optimize (/app/node_modules/svgo/lib/svgo.js:66:17)
#22 18.31     at optimize (/app/node_modules/svgo/lib/svgo-node.js:76:10)
#22 18.31     at Object.generateBundle (/app/node_modules/@poppanator/sveltekit-svg/dist/index.js:102:52)
#22 18.31     at Object.handler (file:///app/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:34064:13)
#22 18.31     at file:///app/node_modules/rollup/dist/es/shared/node-entry.js:22425:40

But if I add this patch to this plugin:

diff --git a/node_modules/@poppanator/sveltekit-svg/dist/index.js b/node_modules/@poppanator/sveltekit-svg/dist/index.js
index e34832c..1f49f90 100644
--- a/node_modules/@poppanator/sveltekit-svg/dist/index.js
+++ b/node_modules/@poppanator/sveltekit-svg/dist/index.js
@@ -96,7 +96,7 @@ function readSvg(options = { type: 'component' }) {
             // Resolve assets that should be SVGO optimized before written to disk.
             // Such assets should exist in the `optimizeUrl` lookup data structure.
             for (const [k, v] of Object.entries(bundle)) {
-                if (!optmizeUrls.has(k) || v.type !== 'asset') {
+                if (!optmizeUrls.has(k) || v.type !== 'asset' || !k.endsWith('.svg')) {
                     continue;
                 }
                 const optSvg = (0, svgo_1.optimize)(v.source.toString(), options.svgoOptions || undefined);

Everything builds like normal again.

[poppa]

Thanks for the report @rbozan.

You really shouldn't end up with .wav-files in that part of the code though. After a quick examination I've noticed that something else is at fault here regarding URL imports, which seems to be related to some changed behavior in Vite.

I will try to come up with a proper solution to this problem within a day or two.

[poppa]

@rbozan I really can't reproduce this behavior. Can you reproduce this in an isolated project?

[rbozan]

Hmmm ... I will do some investigation myself soon but I can't really point a finger to the cause of this issue at this moment. I do see the commit in our project that broke the build but it doesn't seem at all related to either the wav import or any import of svgs, so I will take a closer look soon

[poppa]

Is this still an issue, or can this ticket be closed?

[rbozan]

Is this still an issue, or can this ticket be closed?

I will try today.

[rbozan]

While I still have the problem without patch, I am unsure what the cause is. If I add the .wav file to a separate project and add sveltekit-svg with static building and the node adapter, it seems to work... I guess it can happen when a bundle is big and gets split? I am not sure.

Anyways if I adjust the generateBundle function so it outputs which file is causing it (adjusting the minified file):

        async generateBundle(_options, bundle) {
            // Resolve assets that should be SVGO optimized before written to disk.
            // Such assets should exist in the `optimizeUrl` lookup data structure.
            for (const [k, v] of Object.entries(bundle)) {
                if (!optmizeUrls.has(k) || v.type !== 'asset') {
                    continue;
                }
                console.log(`[sveltekit-svg] Processing file: ${k}`);
                try {
                    const optSvg = (0, svgo_1.optimize)(v.source.toString(), options.svgoOptions || undefined);
                    v.source = Buffer.from(optSvg.data);
                } catch (error) {
                    console.error(`[sveltekit-svg] ERROR processing file: ${k}`);
                    throw new Error(`Failed to optimize SVG file: ${k}\n${error.message}`);
                }
            }
        },

It tells me that:

[sveltekit-svg] Failed to optimize SVG file: _app/immutable/assets/hint.CV9Jt189.wav
<input>:1:1: Non-whitespace before first tag.
    at Object.generateBundle (node_modules/@poppanator/sveltekit-svg/dist/index.js:108:27)
    at Object.handler (file://node_modules/vite/dist/node/chunks/config.js:34362:13)
    at file://node_modules/rollup/dist/es/shared/node-entry.js:22437:40
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

A specific .wav file could not be optimized. Which in all cases I'm loading like regular:

	import hintAudio from '$lib/audio/hint.wav';

But copying that file to a fresh project and trying to load it from there all seems to work with sveltekit-svg. It builds just fine.

If I go back to my own project which has this patch and I look at the commit history I can see the commit which broke the build and started to give the above error. But the commit is totally irrelevant to any loading of the svg or wav file, it's just a normal code change..

[poppa]

Hm, interesting! Then there's seems to be a bug somewhere deeper down in Vite causing this issue at some point when a project gets large enough.

The strange thing is why this wav-file exists in optimizeUrls to begin with. It would be interesting if you could do some simple debugging in renderChunk and find out why this file trickles down into optimizeUrls.

I'm willing to add the extra extension check in generateBundle() to solve your problem though, if we can't figure out the root of the problem.

[rbozan]

I can reproduce it now.

The problem occurs when trying to import the .svg as URL and the audio as an URL as well (which happens in my case).

I made a repository to demonstrate:
https://github.com/rbozan/bug-sveltekit-svg

You can run npm run build to see it failing, but npm run dev -- --open shows you the page with the arrow and audio as usual.

[poppa]

Thanks for the help. Version 6.0.1 should fix the issue.

Feel free to close the ticket if your issue is resolved with the fix. 👍

[rbozan]

Yep it works. Thanks for the package and taking the time to fix it!