jpkleemans/vite-svg-loader

No loader is configured for ".svg" for dynamic import

Closed this issue · 3 comments

grindpride commented

I have this code to dynamically import icon component

const currentIcon = computed(() => {
  const { name } = props

  return defineAsyncComponent(() => import(`../../assets/icons/sized/${name}.svg`))
})

Error No loader is configured for ".svg" occurred after start dev build

Works well, when i use common import

import DefaultIcon from '../../assets/icons/sized/error.svg?component'

const currentIcon = computed(() => DefaultIcon)

vite 5.0.0
vite-svg-loader 5.1.0

grindpride commented

Looks like packages was incorrectly cached. No longer reproduces.

beefchimi commented

I am hitting this issue whenever I run the vite (npm run dev) command. Both build and preview commands work fine.

No amount of re-installing has managed to resolve this... @grindpride any chance you changed anything else to resolve your issue?

I am on vite 5.0.2 and vite-svg-loader 5.1.0.

Re-installing packages:

rm -rf node_modules && rm -rf package-lock.json && npm cache clean --force && npm install

Also, I actually get the exact same error when attempting to run vite in this project's /examples directory. @jpkleemans any advice?

  • 👀1
martijndirksen commented

I'm facing the same issue, newly installed vite@5.0.4 and vite-svg-loader@5.1.0. Dynamic svg imports currently fail:

const computedIcon = computed(() => defineAsyncComponent(() => import(`../../assets/icon/${iconToFileMap[props.icon]}.svg`)));

Will lead to various errors such as:

X [ERROR] No loader is configured for ".svg" files: src/common/assets/icon/zoom-out.svg

     script:(...)/DynamicIcon.vue?id=0:10:70:
       10 │ ...=> import(`../../assets/icon/${iconToFileMap[props.icon]}.svg`)))