I am trying to make a micro frontend react app. First I generate two apps with create-react-app. Then override the configurations using CRACO to work as host and remote app. When I tried to access the remote app, I have below error. Any ideas to resolve this issue?

Compiled with problems:
×
ERROR in src/App.tsx:2:49
TS2307: Cannot find module 'remoteApp/App' or its corresponding type declarations.
    1 | import React from "react";
  > 2 | const RemoteComponent = React.lazy(() => import('remoteApp/App'));
      |                                                 ^^^^^^^^^^^^^^^
    3 |
    4 | function App() {
    5 |   return (

My host app looks like this:

import React from "react";
const RemoteComponent = React.lazy(() => import('remoteApp/App'));

function App() {
  return (
    <div>
      <React.Suspense fallback="Loading Remote Component...">
          <RemoteComponent />
        </React.Suspense>
    </div>
  );
}

export default App;

And my remote app looks like this:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

craco.config.js for Host app:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.plugins.push(
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remoteApp: 'remoteApp@http://localhost:3000/remoteEntry.js',
          },
          shared: {
            react: { singleton: true, eager: true, requiredVersion: '18.3.1' },
            'react-dom': { singleton: true, eager: true, requiredVersion: '18.3.1' },
          },
        })
      );
      return webpackConfig;
    },
  },
};

Here is my craco.config.js for remote:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.plugins.push(
        new ModuleFederationPlugin({
          name: 'remoteApp',
          filename: 'remoteEntry.js',
          exposes: {
            './App': './src/App', // Adjust the path accordingly
          },
          shared: {
            react: { singleton: true, eager: true, requiredVersion: '18.3.1' },
            'react-dom': { singleton: true, eager: true, requiredVersion: '18.3.1' },
          },
        })
      );
      return webpackConfig;
    },
  },
};