Issue with unplugin-icons with storybook / builder-vite

[Hecatron]

What version of vite are you using?

2.9.12

System info and storybook versions

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 18.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44)
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9
    @storybook/addon-docs: ^6.5.9 => 6.5.9
    @storybook/addon-essentials: ^6.5.9 => 6.5.9
    @storybook/addon-interactions: ^6.5.9 => 6.5.9
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/addon-svelte-csf: ^2.0.4 => 2.0.4
    @storybook/builder-vite: ^0.1.36 => 0.1.36
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/svelte: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13

Describe the Bug

Hi,
I've noticed an issue when using unplugin-icons with storybook / builder-vite
Typically the svelte-docgen plugin which builder-vite adds in automatically throws an error

20:57:09 [vite] Internal server error: ENOENT: no such file or directory, open '~icons\logos\svelte-icon.svelte'
  Plugin: svelte-docgen
  File: ~icons/logos/svelte-icon.svelte
      at Object.openSync (node:fs:590:3)
      at Object.readFileSync (node:fs:458:35)
      at TransformContext.transform (C:\D\svelte-components-storybook\node_modules\@storybook\builder-vite\dist\plugins\svelte-docgen.js:46:46)
      at Object.transform (C:\D\svelte-components-storybook\node_modules\vite\dist\node\chunks\dep-8f5c9290.js:39292:53)
      at async doTransform (C:\D\svelte-components-storybook\node_modules\vite\dist\node\chunks\dep-8f5c9290.js:50012:29)

From what I can gather this is because of the way unplugin-icons is used in svelte in that it adds in it's own virtual alias

• https://github.com/antfu/unplugin-icons

.storybook/main.cjs

async viteFinal(config, { configType }) {
    // return the customized config
    let mergedConfig = mergeConfig(config, {
      // customize the Vite config here
      plugins: [
        Icons({
          defaultStyle: '',
          defaultClass: '',
          compiler: 'svelte',
        }),
      ],
    })
    //delete mergedConfig.plugins[9] // removing svelte-docgen makes things work
    return mergedConfig
  },

IconTest1.svelte

<script>
  import SvelteLogo from '~icons/logos/svelte-icon'
</script>

<SvelteLogo />

<SvelteLogo width="12" height="12"/>

You can actually use virtual:icons or ~icons for the alias, but svelte-docgen doesn't seem to like it since it's resolved as part of a different plugin

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Hi, thanks. Can you put together a small reproduction repo that we can experiment with?

Also, does it change anything if you add the Icons plugin before the others that are added by buidler-vite? I think you'd need to add them by updating config.plugins manually, rather than using mergeConfig, but it might be worth a shot.

[Hecatron]

One workaround I've discovered so far is to use the "Raw" mode for the compiler setting

.storybook/main.cjs

  async viteFinal(config, options) {
    // return the customized config
    let mergedConfig = mergeConfig(config, {
      // customize the Vite config here
      plugins: [
        Icons({
          defaultStyle: '',
          defaultClass: '',
          compiler: 'raw',
        }),
      ],
    })
    return mergedConfig
  },

TestIcon.svelte

<script lang="ts">
  import RawMdiAlarmOff from '~icons/mdi/alarm-off?raw&width=4em&height=4em'
</script>

{@html RawMdiAlarmOff}

Will look at creating an example repo for the above issue

[Hecatron]

For info I was able to load the Icon plugin before the others by reversing the order for the mergeConfig function
and putting the original config as a last instead of a first option.
However it didn't help

I'm not sure but I'm wondering if the issue might be within sveltedoc-parser, since we're effectively adding in virtual svelte components that don't actually exist on disk

  async viteFinal(config, options) {
    // return the customized config
    let mergedConfig = mergeConfig( {
      // customize the Vite config here
      plugins: [
        Icons({
          defaultStyle: '',
          defaultClass: '',
          compiler: 'svelte',
        }),
      ],
      resolve: {
        alias: _alias.alias_vite_setts,
      },
    }, config)
    console.log(mergedConfig)
    return mergedConfig
  },

[Amerlander]

I tried to create a reproduction, but I failed, since it was just working with the template (see here for a working example: https://github.com/Amerlander/storybook-experimental-vite-unplugin-icons-issue-repro ).

I have a project where I use the latest version of SvelteKit, and it is also working there. I initial had a different viteFinal and had also issues using unplugin-icons, so you might try to just update this:

async viteFinal(config, { configType }) {
		const { config: userConfig } = await loadConfigFromFile(
			path.resolve(__dirname, "../vite.config.js")
		);
		// Remove Svelte plugins that would duplicate those added by the Storybook plugin
		const plugins = userConfig.plugins.flat(1)
			.filter(p => !p.name.startsWith('vite-plugin-svelte') || p.name === 'vite-plugin-svelte-kit');
		return mergeConfig(config, {
			...userConfig,
			plugins
		});
  	}

<!-- Icon.svelte -->
<script>
    import SvelteLogo from '~icons/logos/svelte-icon'
</script>
  
<SvelteLogo />

<br>
  
<SvelteLogo width="64" height="64"/>

// Icon.stories.js
import Icon from '../lib/Icon.svelte';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
export default {
	title: 'Example/Icon',
	component: Icon,
};

// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
const Template = (args) => ({
	Component: Icon,
	props: args
});

// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
export const Primary = Template.bind({});
Primary.args = {};

[Hecatron]

I've moved away from svelte now, so I'll close this down if its working ok

[tony19]

related storybookjs/storybook#20562