How to Resolve Vite's 'Received \x00virtual:__federation__' Error in a Vue.js App?

I'm using the vite-plugin-federation (https://github.com/originjs/vite-plugin-federation) to enable my Vue.js application to load remote modules at runtime. My app is JavaScript-based with a TypeScript build setup, similar to the examples provided with the plugin.

I was able to load a remote module when the URL was hardcoded in vite-config.ts. However, I now need to specify modules at runtime using the virtual module approach as outlined in the documentation (via virtual:__federation__).

I followed the example by importing in my Vue component as shown below:

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

Yet, the production build fails with the following error:

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'

The documentation suggests adding a module declaration for virtual:__federation__ in a separate file (__federation__.d.ts) to work with TypeScript. I included this declaration in tsconfig.app.json, but the same error persists.

To simplify reproduction, I created this repo: https://github.com/paama/virtual-federation-test. In this project, the virtual federation functions are used in a file at src/utils/moduleFederation.ts and then imported into HelloWorld.vue as a composable.

When I use JavaScript in HelloWorld.vue, I receive exactly the same error as in production. Switching to TypeScript (using lang="ts") delays the error until later in the build process.

Below are relevant configuration snippets:

tsconfig.app.json:

JSONCopied
{
  "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:

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

// https://vite.dev/config/
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:

HTMLCopied
<script setup lang="ts">
// This works when using lang="ts" in the <script> tag
import { onMounted, ref } from 'vue';
import { useFederation } from '../utils/moduleFederation.ts';
</script>

moduleFederation.ts:

TYPESCRIPTCopied
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
    };
}

Any ideas or suggestions on what build parameter I might be missing would be greatly appreciated. I understand that the '\0' prefix is Vite's convention for virtual modules, but I don't know why it leads to this error during module resolution.