New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Having trouble dynamic import SVG #85
Comments
@Jiaocz Did you ever find a solution? |
Nope, we've temporarily set the Maybe the |
I guess I found why this won't work, because the |
@Jiaocz found the issue, don't set The
Is working for me. Im going to make a PR, to fix this. |
Hmm weirdly, if you log |
Strange, still doesn't work for me. I should have mentioned I'm trying to build using library mode, maybe thats the issue? |
I have a quite similar code as @Jiaocz but working on some situations. I created a vue component <script setup lang="ts">
const props = defineProps<{ name: string }>()
const icon = defineAsyncComponent(() => import(`../assets/svgs/${props.name}.svg?component`))
</script>
<template>
<component :is="icon" />
</template> in order to dynamically import my svgs into my pages. The problem is that the element is not available under the onMounted hook and I don't know why. // SomePage.vue
<script setup lang="ts">
onMounted(() => {
console.log(document.querySelector(
'#big-circle > ellipse'
)) // returns null after page transition. Hard reload is working
})
</script>
<template>
<TheSVG id="big-circle" name="big-circle" />
</template> However importing the svg directly (without dynamic import is working fine. // SomePage.vue
<script setup lang="ts">
import bigCircle from '/assets/svgs/big-circle.svg?component'
onMounted(() => {
console.log(document.querySelector(
'#big-circle > ellipse'
)) // Is always working
})
</script>
<template>
<bigCircle id="big-circle" />
</template> FYI I am using Nuxt3 with SSR. import svgLoader from 'vite-svg-loader'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [
svgLoader({
svgo: false,
}),
],
}
}) If you have any idea don't hesitate ! Many thanks in advance 😄 |
Hey guys, if you could post a minimal repro link on stackblitz that'd be awesome, there's several messages in this issue but I think they may not be the same thing. |
I think I found the best beautiful solution :)
|
@Alex-front-end-developer Hey, I got some issues to call the function: I debuged like following:
|
@Luetzen please debug your "icons" object. |
@Luetzen replace |
@Alex-front-end-developer Solution from this threadI tested your solution. Now I get to the same error like in other examples to create svg as component (take a look on "Another Solution"). runtime-core.esm-bundler.js:2337 Uncaught (in promise) Error: Invalid async component load result: /src/assets/icons/bars-solid.svg //IconStandard.vue
//App.vue
//vite.config.js
Another Solution
//App.vue
//Vite.Config
runtime-core.esm-bundler.js:2337 Uncaught (in promise) Error: Invalid async component load result: /@fs/assets/icons/bolt-solid.svg It is not the same error but similiar I think. |
@Luetzen I'm amazed at your carelessness, your default import is the |
Shame on me. I thought I had tried that as well, was even pretty sure. I must have missed it though. Now it works. Here again for others who may have had the same problem as me. Using the Component
SVG Component
Thanks a lot to @Alex-front-end-developer ! |
@codiini iconList is an object, so when you call its property, you need to enter the key, not the path, please correlate with the keys of the object on your screenshot and you will understand what's going on :) |
@Alex-front-end-developer I copied the solution from @Luetzen and I'm now getting this error
Any idea what the issue might be? I'd appreciate the help. Thank you |
@codiini check what keys you have in the icons object and match them with the key call, the keys must match. |
@codiini try to console what returns after the call. |
@Alex-front-end-developer So, I'm wondering whether it's an issue with using Nuxt and not Vue. I tried the same code with a Vue app, and it worked. I also tried just importing the SVG as a component in the Nuxt app like this
|
So the accepted workaround / solution for me didn't cut the mustard. I needed to set the Instead, I bypassed the plugin entirely, which allowed me to remove it. Yes it's a little bit more manual work, however you get full control over everything. function createAsyncComponent() {
const importPromise = new Promise((resolve, reject) => {
// Obviously change this to the path to your icon file location
import(`./icons/${props.iconName}.svg?raw`)
.then((mod) => resolve({ template: mod.default, name: `${props.iconName}Icon` }))
.catch((error) => reject(error));
});
return defineAsyncComponent(() => importPromise);
}
const IconComponent = computed(() => {
// Perform any validation you need to make sure that it's a valid icon
const valid = validateIconProps();
if (!valid) return null;
return createAsyncComponent();
}); After this, the plugin became unnecessary for our project. But I thought that it might be valuable for people who arrive here in the same position as me. |
Have you found the solution? I got same issue here |
Late to the game here but this sorted it for me. I have trimmed the code down a bit if anyone wants it. I had to use the path from the root of the project rather than relative path.
|
I've set the default import to
url
in vite.config.tsAnd then when I'm using dynamic import for a certain icon, it will cause an error like:
Is there any solution for this situation?
The text was updated successfully, but these errors were encountered: