Storybook build - Unknown variable dynamic import: ./{filename}.svg?component

I have a library built using Vite (in library mode) + Vue3 + Storybook + TypeScript and I am facing problems building the project and/or building Storybook when Vite-SVG-Loader is used.

The component that uses a SVG:

<script setup lang="ts">
import { computed, defineAsyncComponent } from "vue";

const props = withDefaults(defineProps<{ name: string }>(), {
  name: 'add'
});

const iconComponent = computed(() => {
  return defineAsyncComponent(
    () => import(`./assets/${props.name}.svg?component`)
  );
});
</script>

<template>
  <component :is="iconComponent" />
</template>

Scenario 1 By keeping the ?component on the URL for the defineAsyncComponent function, vite build and start-storybook works perfectly fine but although build-storybook runs fine, when you try to access a component on storybook that uses the async loaded SVG you get the following error:

Unknown variable dynamic import: ./assets/add.svg?component Error: Unknown variable dynamic import: ./assets/add.svg?component at http://127.0.0.1:8080/assets/iframe.d31911ec.js:930:5989 at new Promise (<anonymous>) at variableDynamicImportRuntime0 (http://127.0.0.1:8080/assets/iframe.d31911ec.js:930:5886) at http://127.0.0.1:8080/assets/iframe.d31911ec.js:930:6317 at pe (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:21340) at setup (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:22194) at callWithErrorHandling (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:848) at setupStatefulComponent (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:68463) at setupComponent (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:68106) at Ht (http://127.0.0.1:8080/assets/iframe.d31911ec.js:119:47236)

Scenario 2 On the other hand, by removing the ?component, everything Storybook related works but the vite build throws the following error:

Invalid value “umd” for option “output.format” - UMD and IIFE output formats are not supported for code-splitting builds. error during build: Error: Invalid value “umd” for option “output.format” - UMD and IIFE output formats are not supported for code-splitting builds. at error (./node_modules/rollup/dist/shared/rollup.js:198:30) at validateOptionsForMultiChunkOutput (./node_modules/rollup/dist/shared/rollup.js:16207:16) at Bundle.generate (./node_modules/rollup/dist/shared/rollup.js:16041:17) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ./node_modules/rollup/dist/shared/rollup.js:23679:27 at async catchUnfinishedHookActions (./node_modules/rollup/dist/shared/rollup.js:23121:20) at async doBuild (./node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:39180:26) at async build (./node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:39011:16) at async CAC.<anonymous> (./node_modules/vite/dist/node/cli.js:738:9)

My project configuration

Packages used:

• storybook-builder-vite: ^0.1.23
• @storybook/vue3: ^6.5.0-alpha.55
• typescript: ~4.5.5
• vite: ^2.9.5
• vite-plugin-vue-type-imports: ^0.1.3
• vite-svg-loader: ^3.2.0

Vite setup

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import ViteSvgLoader from "vite-svg-loader";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), ViteSvgLoader()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/main.ts"),
      name: "DesignSystem",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

Storybook main.js

const ViteSvgLoader = require('vite-svg-loader')

module.exports = {
  ...
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  },
  async viteFinal(config, { configType }) {
    config.plugins.push(ViteSvgLoader());
    return config;
  },
}

Any ideas?

[jpkleemans]

@dpschen thanks for your solution!

[felixvictor]

Maybe worth mentioning that I have problems updating to the latest version of the vite-plugin-glob. The approach above should work with v.0.2.9.

Not sure why shrug

Edit: To be clear: fixing the mentioned breaking change of vite-plugin-glob (rename of the export option property to import) didn’t fix make the new version work for me.

You also have to add the restoreQueryExtension option to the plugin:

        GlobPlugin({ restoreQueryExtension: true }),