How to use module federation with lit elements?

I try to implement module federation for lit elements with this package @originjs/vite-plugin-federation with vite and typescript. I am getting an error in host element, when importing the remote app.

import RemoteElement from “remoteApp/RemoteElement”;

I am getting the below error on the above line in host element.

Cannot find module ‘remoteApp/RemoteElement’ or its corresponding type declarations.ts(2307)

remote-element.ts

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("remote-element")
export class RemoteElement extends LitElement {
  render() {
    return html`<p>Remote Element</p>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "remote-element": RemoteElement;
  }
}

vite-config.ts of remote element

import federation from "@originjs/vite-plugin-federation";

export default {
  server: {
    port: 4300,
    strictPort: true,
  },
  preview: {
    port: 4300,
    strictPort: true,
  },
  plugins: [
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      exposes: {
        "./remote-element": "./src/remote-element.ts",
      },
      shared: [],
    }),
  ],
};

tsconfig.json of remote element

{
  "compilerOptions": {
    "target": "ES2020",
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

package.json of remote element

{
  "name": "remote",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "lit": "^3.2.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.6",
    "typescript": "~5.6.2",
    "vite": "^5.4.10"
  }
}

host-element.ts

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

import RemoteElement from "remoteApp/RemoteElement";

@customElement("host-element")
export class HostElement extends LitElement {
  render() {
    return html` <RemoteElement></RemoteElement> `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "host-element": HostElement;
  }
}

vite.config.ts of host element

import federation from "@originjs/vite-plugin-federation";

export default {
  server: {
    port: 4200,
    strictPort: true,
  },
  plugins: [
    federation({
      name: "host-app",
      remotes: {
        remote_app: "http://localhost:4300/assets/remoteEntry.js",
      },
      shared: [],
    }),
  ],
};

tsconfig.json of host element

{
  "compilerOptions": {
    "target": "ES2020",
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "skipDefaultLibCheck": false
  },
  "include": ["src"]
}

package.json of host element

{
  "name": "host",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "lit": "^3.2.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.6",
    "typescript": "~5.6.2",
    "vite": "^5.4.10"
  }
}