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

[grindpride]

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]

Looks like packages was incorrectly cached. No longer reproduces.

[beefchimi]

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?

[martijndirksen]

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`)))