Error Loading SVGs

[leecbryant]

I am trying to load SVGs but I am getting the following:
"Error: require("assets/svg/test.svg") failed. module not found in moduleCache"

This is the following code:

setup(props) {
   const svg = ref(null);

   onBeforeMount(() => {
      svg.value = require(`../assets/svg/${props.name}.svg`);
   });
 
   return { svg }
}

Any recommendations?

Edit: This code is nested in a "components" folder. The SVG file does exist at that path. I am able to access it using a different method, but I would like to access it through require for compatibility purposes. Does SFC just not support this yet or am I missing something?

[FranckFreiburger]

This situation is expected. Dependances statistical analysis is only done on import statement,

If you need to use the require() (synchronous) form like in your example, the module must be provided at initialisation.
eg.

 const options = {
      moduleCache: {
        vue: Vue,
        mySvgImage: ...
      },
      ...

In your case, since your filename is an expression, the best solution is to use import() function :

import(`../assets/svg/${props.name}.svg`)
.then(svgData=> { svg.value = svgData })

[leecbryant]

Thank you for the explanation. Makes perfect sense.

However, when changing to import, Vue3SFC is error reporting:
TypeError: Unable to handle .svg files (assets/svg/test.svg).

Edit:
I am loading the component through a migration guide posted by a user in the issues tab with modifications to load js files as mjs for the purposes of ES6 modules.

const sfcLoaderOptions = {
    moduleCache: {
        vue: Vue
    },
    getFile: async function (url) {
        const response = await fetch(url);
        if (!response.ok) {
            throw Object.assign(new Error(response.statusText + ' ' + url), { response });
        }

        let content = await response.text();
        if(url.endsWith(".js")) 
            content = { content: content, type: ".mjs" }
        
        return content;
    },
    addStyle: function (textContent) {
        const style = Object.assign(document.createElement('style'), { textContent });
        const reference = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, reference);
    }
};

function httpVueLoader(componentPath) {
    return Vue.defineAsyncComponent(function () {
        return window['vue3-sfc-loader'].loadModule(componentPath, sfcLoaderOptions);
    });
}

[FranckFreiburger]

By default, vue3-sfc-loader don't know how to handle .svg files. You have to define options.handleModule

see:

vue3-sfc-loader/tests/basic.test.js

Lines 710 to 715 in 6c35fa4

	options.handleModule = async (type, getContentData, path, options) => {
	switch (type) {
	case '.svg': return 'data:image/svg+xml,' + await getContentData(false);
	}
	};

[leecbryant]

This seems to be a rabbit hole that I cannot figure out. When using defining handleModule in my sfcLoaderOptions (mentioned above), it says getContentData is not defined. However, when defining getContentData, it says "TypeError: Invalid module content (views/main.vue): undefined"

Here is my current code:

const sfcLoaderOptions = {
    moduleCache: {
        vue: Vue
    },
    getFile: async function (url) {
        const response = await fetch(url);
        if (!response.ok) {
            throw Object.assign(new Error(response.statusText + ' ' + url), { response });
        }

        let content = await response.text();
        if(url.endsWith(".js")) 
            content = { content: content, type: ".mjs" }
        
        return {
            getContentData: content
        };
    },
    handleModule: async function (type, getContentData, path, options) { 
        switch (type) { 
            case '.svg': return 'data:image/svg+xml,' + await getContentData(false); 
        } 
    },
    addStyle: function (textContent) {
        const style = Object.assign(document.createElement('style'), { textContent });
        const reference = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, reference);
    }
};

function httpVueLoader(componentPath) {
    return Vue.defineAsyncComponent(function () {
        return window['vue3-sfc-loader'].loadModule(componentPath, sfcLoaderOptions);
    });
}

const app = Vue.createApp(httpVueLoader('views/main.vue'));

Any recommendations?

Sidenote: I have tried setting getFile equal to the very first readme example using

 getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text()

however, this also gives an Invalid module content: undefined type error.

[FranckFreiburger]

In fact, there are a lot of different ways to achieve this.
Look at these examples :
Load SVG dynamically (using async setup() and <Suspense>)
Load SVG dynamically (using watch())

[leecbryant]

After upgrading from 0.7.3 to 0.8.3, this worked like a charm. Thank you!