Webpack + Svelte: You may need an additional loader
didier opened this issue Ā· comments
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)
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'