TypeScript cannot find remote module types in Vite + Module Federation (without manually copying declarations)

[amh6281]

Hi all,

I’m working on a Vite + Module Federation setup with a host and multiple remote applications. Each remote exposes React components, and I’m generating .d.ts files with vite-plugin-dts.

Here’s a simplified version of my setup:

Remote vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { federation } from "@module-federation/vite";
import dts from "vite-plugin-dts";

export default defineConfig({
  base: "http://localhost:4001/remote/",
  build: { target: "chrome89", rollupOptions: { output: { format: "es" } } },
  plugins: [
    react(),
    dts({
      outDir: "dist/@mf-types",
      include: ["src/App.tsx"],
      insertTypesEntry: true,
      copyDtsFiles: true,
      pathsToAliases: true,
      staticImport: true,
      rollupTypes: false,
      tsconfigPath: "./tsconfig.app.json",
      compilerOptions: { declaration: true, emitDeclarationOnly: true, skipLibCheck: true },
    }),
    federation({
      name: "remote",
      filename: "remoteEntry.js",
      exposes: { "./RemoteApp": "./src/App.tsx" },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
});

Host vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { federation } from "@module-federation/vite";

export default defineConfig({
  server: { hmr: { port: 3000, host: "localhost" } },
  plugins: [
    react(),
    federation({
      name: "host",
      filename: "hostEntry.js",
      remotes: {
        remote: {
          type: "module",
          name: "remote",
          entry: "http://localhost:4001/remote/remoteEntry.js",
        },
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
});

Host React usage:

import { lazy, Suspense } from "react";

const RemoteApp = lazy(() => import("remote/RemoteApp"));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <RemoteApp />
  </Suspense>
);

export default App;

Problem

TypeScript throws the following error in the host project:

Cannot find module 'remote/RemoteApp' or its corresponding type declarations.ts(2307)

Even though each remote builds its own dist/@mf-types/*.d.ts, the host cannot resolve these types automatically.

Constraints

• I don’t want to maintain a separate declaration.d.ts manually for each remote.
• Adding paths in tsconfig.json like "../remote/dist/@mf-types/*" works locally but fails in GitHub Actions CI because paths outside the repo are not allowed.

Question

Is there any way to make TypeScript automatically infer remote types in Vite + Module Federation without creating a shared declaration.d.ts or manually copying files, even when tsconfig.paths cannot point outside the repository?

[knutsbyviktor]

We are currently working on an identical setup and facing the same issue. We can see that is on the roadmap, here. Does this feature have an eta?