Vite虚拟模块加载失败：virtual:__federation__加载报错求助

我在Vue项目中使用vite-plugin-federation实现运行时加载第三方远程模块，项目代码基于JavaScript，但采用TypeScript构建配置，和插件官方示例结构类似。

之前在vite-config.ts中硬编码远程模块URL时能正常运行，但现在需要运行时动态指定加载的模块，根据插件文档，应该通过virtual:__federation__虚拟模块导入相关方法：

import {__federation_method_getRemote as getRemote,
__federation_method_setRemote as setRemote,
__federation_method_unwrapDefault as unwrapModule,
type IRemoteConfig,
} from "virtual:__federation__";

但执行生产构建时出现如下报错：

error during build:
[vite:load-fallback] Could not load virtual__federation__ (imported by src/utils/moduleFederation.ts): The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00virtual:__federation__'
TypeError [PLUGIN_ERROR]: Could not load virtual:__federation__ (imported by src/utils/moduleFederation.ts): The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00virtual:__federation__'

已做的排查尝试 #

• 按照插件文档要求，在TypeScript环境下为virtual:__federation__添加了模块声明文件__federation__.d.ts，并已引入到tsconfig.app.json中，但问题未解决。
• 创建了示例项目复现问题：将virtual federation相关逻辑封装在utils/moduleFederation.ts组合式函数中，在HelloWorld.vue中引入。当组件脚本为JavaScript时，报错与生产环境一致；当脚本为TypeScript时，导入阶段看似成功，但仍会触发相同错误，只是报错时机延后。

相关配置文件 #

tsconfig.app.ts #

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "allowJs": true,
    },
  "include": [
    "__federation__.d.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

vite-config.ts #

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
    plugins: [
        vue(),
        federation({
            name: "agent",
            filename: "remoteEntry.js",
            shared: { vue: { modulePreload: true } },
        }),
    ],
    esbuild: {
        supported: {
            "top-level-await": true,
        },
    },
    build: {
      target: 'esnext',
      minify: false,
      cssCodeSplit: true,
      rollupOptions: {
          output: {
              minifyInternalExports: false
          }
      }
  }
});

HelloWorld.vue（关键部分） #

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useFederation } from '../utils/moduleFederation.ts'
</script>

moduleFederation.ts #

import {
    __federation_method_setRemote as setRemote,
    __federation_method_getRemote as getRemote,
    __federation_method_unwrapDefault as unwrapModule
  } from 'virtual:__federation__'

export function useFederation() {
    function setModule(moduleName: string, url: string) {
        setRemote(moduleName, {
            url: () => Promise.resolve(url),
            format: 'esm',
            from: 'vite'
        })
    }

    function getComponent(moduleName: string, componentName: string): Object {
        return getRemote(moduleName, `.\\${componentName}`).then((module) => {
            unwrapModule(module).then((module) =>
                Promise.resolve(module)
            )
        })
    }

    return {
        setModule,
        getComponent
    }
}

求助点 #

怀疑是缺少某个构建配置参数，但无法确定具体项。我知道虚拟模块名称通常会添加\0前缀，但不理解为什么会出现额外的null字节导致报错，求解决方法。

内容的提问来源于stack exchange，提问作者paapaa000