svg while dual building with vite and webpack

Question

For the short run, I need to maintain both webpack and vite builds as we convert from vue 2/webpack to vue 3/vite. Otherwise we will never be able to find the time to make the move to vite.

I've found ways to get around a lot of the differences so that the code is the same for both. I'm stuck on this, though. I'm importing an svg for including inline.

In vue 2/webpack I do this:

import myimage from "!rawloader!@/assets/icons/myimage.svg"

In vue 3/vite I do this:

import myimage from "@/assets/icons/myimage.svg?raw"

It works if I add ?raw to the webpack version, so what I'd like to do is be able to have !rawloader! in the vite version and have vite ignore it. Is that possible?

My first thought was to put a define in vite.config.ts like this:

define: {
  '!rawloader!': '',
}

But that gives me the error:

✘ [ERROR] The define key "!rawloader!" must be a valid identifier

✘ [ERROR] Invalid define value (must be valid JSON syntax or a single identifier): 

Is there a way to tell vite to just filter out a particular string completely by text replacement?

Alternately, is there a way to load the svg in webpack without !rawloader!?

Answer 1

You can define an alias in vite.config.js:

export default defineConfig({
    ...
    resolve: {
        alias: {
            "!rawloader!": ''
        }
    }
})