Browser refusing to import SVG *raw*

[richardtallent]

I've been pulling my hair out for HOURS over this. I've tried every known plugin related to rollup, vite, and svg. I even tried to roll my own plugin. Nothing works. I'm using vite 2.0.5 and vue 3.0.7.

I need to import the source code of a bunch of SVG files as strings, not as Components. From the docs, this should work, but doesn't:

import mySvgSource from "./assets/my-file.svg?raw"

Instead, I get this browser error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Since ?raw didn't work, I also tried writing my own rollup plugin, which didn't help:

// plugin-test.js, based on rollup-plugin-rawsvg
export default function myPlugin() {
	return {
		name: "plugin-test",
		transform(code, id) {
			if (/\.svg$/.test(id)) {
				const content = JSON.stringify(code.trim())
				return { code: `export default ${content}`, map: { mappings: "" } }
			}
		},
	}
}

// vite.config.ts
import myPlugin from "plugin-test"
export default defineConfig({
	plugins: [myPlugin(), vue(), viteESLint()],
...

Does anyone have ideas? I'm down to the wire on on a deadline, and without getting SVG icons working, I'm SOL.

[richardtallent]

I created a new repo and everything worked.
Then I renamed the file where I was loading the SVG from .js to .ts and... mine worked.
I still have no idea what's going on.
Only the import Foo from "foo.svg?raw" syntax works. import() doesn't return a string.