当前位置：文江博客话题详情

组件的动态导入不适用于变量的组件路径

发布于 2025-02-12 09:09:36 字数 2935 浏览 0 评论 0 原文

堆栈

VUE 3.2
NUXT 3.0.0-RC.4
VITE 2.9

试图

通过变量而不是静态字符串的＆lt;组件动态加载组件：IS /＆gt; < /code>。

代码

这是我要实现的范围的示例：

<script lang="ts" setup>
  import { defineAsyncComponent } from 'vue'

  const filepathStatic = '../foobar/Foobar.vue'

  const bar = 'bar'
  const filepathDynamic = `../foobar/Foo${bar}.vue` // meets all requirements

  const asyncComponent = defineAsyncComponent(() => {
    return import('../foobar/Foobar.vue') // WORKS
    
    return import(filepathStatic) // does NOT work
    return import(filepathDynamic) // does NOT work
  })
</script>

<template>
  <div>
    <component :is="asyncComponent" />
  </div>
</template>

错误

1。）vite-error

The above dynamic import cannot be analyzed by vite.

See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

=＆gt;动态文件名满足此页面上所述的所有要求。

2。）nuxt-error

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

at __instantiateModule__ (./.nuxt/dist/server/server.mjs:4094:11)
at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:4085:25)
at ssrImport (./.nuxt/dist/server/server.mjs:4110:13)
at ssrDynamicImport (./.nuxt/dist/server/server.mjs:4121:12)
at ./.nuxt/dist/server/server.mjs:2808:14
at load (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2255:17)
at setup (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2308:24)
at callWithErrorHandling (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
at setupStatefulComponent (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29)
at setupComponent (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11)

=＆gt;我不知道，为什么这不起作用。

原文

Stack

Vue 3.2
Nuxt 3.0.0-rc.4
Vite 2.9

Goal

Trying to dynamically load a component with <component :is /> from a variable instead of a static string.

Code

Here is a minified example of what I am trying to achieve:

<script lang="ts" setup>
  import { defineAsyncComponent } from 'vue'

  const filepathStatic = '../foobar/Foobar.vue'

  const bar = 'bar'
  const filepathDynamic = `../foobar/Foo${bar}.vue` // meets all requirements

  const asyncComponent = defineAsyncComponent(() => {
    return import('../foobar/Foobar.vue') // WORKS
    
    return import(filepathStatic) // does NOT work
    return import(filepathDynamic) // does NOT work
  })
</script>

<template>
  <div>
    <component :is="asyncComponent" />
  </div>
</template>

Errors

1.) Vite-Error

The above dynamic import cannot be analyzed by vite.

See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

=> The dynamic filenames meet ALL the requirements stated on this page.

2.) Nuxt-Error

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

at __instantiateModule__ (./.nuxt/dist/server/server.mjs:4094:11)
at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:4085:25)
at ssrImport (./.nuxt/dist/server/server.mjs:4110:13)
at ssrDynamicImport (./.nuxt/dist/server/server.mjs:4121:12)
at ./.nuxt/dist/server/server.mjs:2808:14
at load (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2255:17)
at setup (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2308:24)
at callWithErrorHandling (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
at setupStatefulComponent (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29)
at setupComponent (/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11)

=> I have NO idea, why this does not work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

像你 2025-02-19 09:09:36

这就是大多数工具进行动态导入的方式（无论是WebPack，Vite，lollup）

工具需要在构建时间中知道使用的模块（js/ts文件），
仅提供可变的变量该工具没有任何操作（它没有运行您的代码来查找代码出来在运行时可以有什么价值）

请参阅这个部分滚动的 dynamic-import-vars

当动态导入包含串联的字符串时，字符串的变量将用球模式替换。在构建过程中评估了该球模式，并将发现的任何文件添加到汇总捆绑包中。在运行时，为完整的串联字符串返回正确的导入。

要知道在汇总捆绑包中注入什么，我们必须能够对代码进行一些静态分析，并对可能的导入做出一些假设。例如，如果您仅使用一个变量，则可以从理论上从整个文件系统导入任何内容。

这意味着：

return import('../foobar/Foobar.vue') // works
    
return import(someVariable) // does NOT work

return import(`../foobar/${someVariable}.vue`) // works

This is how most tools do dynamic imports (be it Webpack, Vite, Rollup)

Tool needs to know the used module (JS/TS file) at build time
Providing only variable the tool does no nothing (it does not run your code to find out what can be it's value at runtime)

See this part of the docs of Rollup's dynamic-import-vars plugin used in the Vite

When a dynamic import contains a concatenated string, the variables of the string are replaced with a glob pattern. This glob pattern is evaluated during the build, and any files found are added to the rollup bundle. At runtime, the correct import is returned for the full concatenated string.

To know what to inject in the rollup bundle, we have to be able to do some static analysis on the code and make some assumptions about the possible imports. For example, if you use just a variable you could in theory import anything from your entire file system.

This means:

return import('../foobar/Foobar.vue') // works
    
return import(someVariable) // does NOT work

return import(`../foobar/${someVariable}.vue`) // works

回复收藏 0 原文