Reactjs – Microfrontend Module Federation using vite/react/typescript: Cannot find module

I am trying to setup a microfrontend for my project and at base I am using vite to setup my react/typescript applications. I’ve installed the vite plugin for module federation.

And these are my vite.config.ts:

Host:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'



export default defineConfig({
  build: {
    target: 'esnext' 
  },
  plugins: [react(),
  federation({
    name: "app",
    remotes: {
      "remote": "http://localhost:5001/assets/remoteEntry.js",
    },
    shared: ["react", "react-dom"],
  })
  ],
})

remote:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'



export default defineConfig({
  build: {
    target: 
  },
  plugins: [react(),
  federation({
    name: "remote",
    filename: 'remoteEntry.js',
    exposes: {
      "Button": "./src/components/Button",
    },
    shared: ["react", "react-dom"],
  })

  ],
  server: {
    port: 5001,
  },
})

When i import the shared button in my host application i get this error:

src/App.tsx:3:20 - error TS2307: Cannot find module 'remote/Button' or its corresponding type declarations.

I am running the remote app on 5001 port. I am lost at what I am missing, hope anyone can help me out – if more context/info is needed I’m happy to provide more.