Webpack + Svelte: You may need an additional loader

[didier]

Trying to use unplugion-icons with Webpack through Storybook (Storybook, Svelte and Vite don't play well together yet) but I can not get the plugin to work with webpack and svelte for the life of me.

Svelte component

<script context="module">
  import list from '~icons/uil/list-ol'

  const icons = {
    list 
  }
</script>

<script>
  export let icon
</script>

<svelte:component this={icons[icon]} style="all: inherit;" />

Story

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf'

  import Icon from './Icon.svelte'
</script>

<Meta title="Atoms/Icon" component={Icon} />

<Template let:args>
  <Icon {...args} />
</Template>

<Story name="Default" args={{}} />

Relevant lines of the webpack config (inside Storybook's main.js)

config.plugins = [
  ...config.plugins,
  require('unplugin-icons/webpack')({
    compiler: 'svelte'
  })
]

config.resolve.alias = {
  ...config.resolve.alias,
  $lib: path.resolve(__dirname, '../src/lib')
}

Error log

ModuleParseError: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
> <svg width="1.2em" height="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" {...$$props}>{@html `<path d="M12 2a10 10 0 0 0-7.35 16.76a10 10 0 0 0 14.7 0A10 10 0 0 0 12 2zm0 18a8 8 0 0 1-5.55-2.25a6 6 0 0 1 11.1 0A8 8 0 0 1 12 20zm-2-10a2 2 0 1 1 2 2a2 2 0 0 1-2-2zm8.91 6A8 8 0 0 0 15 12.62a4 4 0 1 0-6 0A8 8 0 0 0 5.09 16A7.92 7.92 0 0 1 4 12a8 8 0 0 1 16 0a7.92 7.92 0 0 1-1.09 4z" fill="currentColor"/>`}</svg>
    at handleParseError (/Users/didier/Projects/PROJECT/PROJECT-app/node_modules/webpack/lib/NormalModule.js:469:19)
    at /Users/didier/Projects/PROJECT/PROJECT-app/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/didier/Projects/PROJECT/PROJECT-app/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/didier/Projects/PROJECT/PROJECT-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/didier/Projects/PROJECT/PROJECT-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/didier/Projects/PROJECT/PROJECT-app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/didier/Projects/PROJECT/PROJECT-app/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/Users/didier/Projects/PROJECT/PROJECT-app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.load (/Users/didier/Projects/PROJECT/PROJECT-app/node_modules/unplugin/dist/webpack/loaders/load.js:40:5)

[MichaelBrunn3r]

Storybook, Svelte and Vite don't play well together yet

After a lot of research I actually got Storybook working with Svelte and Vite. Using Iconify Svelte components actually works, but unplugin-icons only works in sveltekit.

I think it has similar loading problems though:
import IconAccountBox from 'virtual:icons/mdi/bell.svelte'; yields the error
ENOENT: no such file or directory, open '~icons\mdi\bell.svelte'