Async imports with variables throw error

[cipami]

Environment

---

• Operating System: Linux
• Node Version: v14.16.0
• Nuxt Version: 3-3.0.0-27237303.6acfdcd
• Package Manager: npm
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Describe the bug

Using dynamic imports with variables throw error.
Example

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const name = 'test';
const componentId = defineAsyncComponent(
  () => import(`./components/${name}.vue`)
);
</script>

Error

Error
[Vue warn]: Unhandled error during execution of async component loader 
  at <AsyncComponentWrapper>
[Vue warn]: Unhandled error during execution of setup function 
  at <AsyncComponentWrapper>
Server Side Rendering Error: TypeError: Cannot read properties of undefined (reading 'stubModule')
    at __instantiateModule__ (file:///home/projects/github-gyhqth/.nuxt/dist/server/server.mjs:1782:11)
    at __ssrLoadModule__ (file:///home/projects/github-gyhqth/.nuxt/dist/server/server.mjs:1773:25)
    at ssrImport (file:///home/projects/github-gyhqth/.nuxt/dist/server/server.mjs:1797:13)
    at ssrDynamicImport (file:///home/projects/github-gyhqth/.nuxt/dist/server/server.mjs:1808:12)
    at eval (file:///home/projects/github-gyhqth/.nuxt/dist/server/server.mjs:1696:74)
    at load (/home/projects/github-gyhqth/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1529:17)
    at setup (/home/projects/github-gyhqth/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1582:24)
    at callWithErrorHandling (/home/projects/github-gyhqth/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6599:22)
    at setupStatefulComponent (/home/projects/github-gyhqth/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6225:29)
    at setupComponent (/home/projects/github-gyhqth/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6181:11)

Reproduction

https://stackblitz.com/edit/github-gyhqth?file=app.vue

Additional context

No response

Logs

No response

[pi0]

Hi, @MichalCipa sorry for the late answer.

It is a current limitation of Vite that we don't support unpredictable dynamic imports. (#12806). If you really need this, you can use webpack 5 by setting vite: false in nuxt.config until we fix this issue.

BTW I've looked into your reproduction. For dynamic components, you can simply name them! Components discovery will lazily load them for you.

Example: https://stackblitz.com/edit/github-gyhqth-kwtjtb?file=app.vue
Docs: https://v3.nuxtjs.org/docs/directory-structure/components#dynamic-imports

[cipami]

Hi, @pi0
Thanks for the answer. This is actually so cool! I didn't realized it also work this way.

[grindpride]

@pi0 It turns out that this code for dynamic icon import will never work for vite?

setup(props) {
      const currentIcon = computed(() => defineAsyncComponent(() => import(`../../icons/${props.name}.svg?component`))).value
      return {
        currentIcon
      }
    }

This code example from vite-svg-loader library issue.

[miracleonyenma]

@grindpride I'm wondering if you've found a way to go about dynamic icon import with vite? I'm trying to do something similar in Nuxt 3 and its a headache

[Utitofon-Udoekong]

@pi0 It turns out that this code for dynamic icon import will never work for vite?

setup(props) {
      const currentIcon = computed(() => defineAsyncComponent(() => import(`../../icons/${props.name}.svg?component`))).value
      return {
        currentIcon
      }
    }

This code example from vite-svg-loader library issue.

Any solution on this?

[grindpride]

@Utitofon-Udoekong @miracleonyenma
Temporal solution - disable vite-loader

yarn add -D vue-svg-loader@0.17.0-beta.2 vue-loader@latest

nuxt.config.ts

export default defineNuxtConfig({
    vite: false,
    hooks: {
        'webpack:config': (configs) => {
            configs.forEach((config) => {
                const svgRule = config.module.rules.find((rule) => rule.test.test('.svg'))
                svgRule.test = /\.(png|jpe?g|gif|webp)$/
                config.module.rules.push({
                    test: /\.svg$/,
                    use: ['vue-loader', 'vue-svg-loader'],
                })
            })
        }
    },

})

Icon.vue

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

<script lang="ts">
import DefaultIcon from '@/assets/icons/16/error.svg?inline'

export default defineComponent({
  name: 'Icon',
  components:{
    DefaultIcon
  },
  props: {
    size: {
      type: String,
      default: '16'
    },
    name: {
      type: String,
      required: true
    },
  },
  setup(props) {
    const currentIcon = computed(() => {
      //for reactivity
      const { size, name } = props

      return defineAsyncComponent(() =>
          import(`@/assets/icons/${size}/${name}.svg?inline`).catch(() => {
            console.error(`There is no such icon with params name:${name}, size:${size}`)
            return DefaultIcon
          })
      )
    })

    return {
      currentIcon
    }
  }
})
</script>

[cdwmhcc]

Any update? @pi0 @danielroe

[516310460]

When SSR: true, the problem still exists

[sawden]

Any update on this?

[vaheqelyan]

Any updates ?