dynamically import not working when build

@jpkleemans Hi, I used this but failed when build for production. It’s working in dev mode

<script lang="ts">
  import { computed, defineComponent, defineAsyncComponent } from 'vue'
  export default defineComponent({
    props: {
      name: {
        type: String,
        default: undefined,
      },
    },
    setup(props) {
      const currentIcon = computed(() => defineAsyncComponent(() => import(`../../icons/${props.name}.svg?component`))).value
      return {
        currentIcon
      }
    }
  })
</script>

[silencerspirit]

@cdwmhcc you need install plugin vite-require; In vite.config.ts:

import svgLoader from 'vite-svg-loader';
import { viteRequire } from 'vite-require';

export default {
  ...,
  plugins: [svgLoader(), viteRequire()]
};

and if you use vitest as test platform, in vitest.config.ts:

import { viteRequire } from 'vite-require';
import svgLoader from 'vite-svg-loader';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  ...,
  plugins: [vue(), viteRequire(), svgLoader()],
});

Not working in nuxt.js 3

U welcome https://stackblitz.com/edit/github-1ck5ek?file=app.vue 😃

[silencerspirit]

@jpkleemans

Hi! All imports on server-side (raw,url,component) calling error.

500 Cannot read properties of undefined (reading 'stubModule')

On client-side - its working;

Code example:

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

<script>
let icon = await import(`../../assets/svg/${props.name.toLowerCase()}.svg?component`).then((_) => _.default);
</script>

Resolve this problem, create a functional component:

import { h } from 'vue';

const CommonIcon = (props, context) => {
 const svg = require(`../../assets/svg/${props.name}.svg`).default;
 return h('span', {...context.attrs, class: 'common-icon', }, [
    h(svg, { class: 'h-[inherit] w-[inherit]' }, [h(svg)]),
  ]);
}

CommonIcon.props = {
  name: {
    type: String,
    required: true,
  },
  width: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '',
  },
};

export default CommonIcon;