Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async imports with variables throw error

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

10reactions

miracleonyenmacommented, Jan 7, 2022

@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

6reactions

sawdencommented, Jun 14, 2022

Any update on this?