Export Objects with a map of key and component

[p-viral]

Hello,

I am trying to create a new application where I have 2 remotes called remote1 and remote2. I have the host named as app_container.
I am trying to use dynamic remotes using loadRemote at runtime for something like the below signature. I created this app using nx with preset=apps and have a host and remote kind of microfrontend architecture.

Remote1

I have a views.ts file in remote1. This file exports a constant object like this :
`import Address from './address';
import Address2 from './address2';

export const views = {
ADDRESS1_REMOTE1: Address,
ADDRESS2_REMOTE1: Address2,
};

export default views;`
Here Address and Address2 are react components with nothing but a div that says "This is address component from remote 1"

Remote2

Remote2 is exactly like Remote1 but the keys from views.ts say
`import Address from './address';
import Address2 from './address2';

export const views = {
ADDRESS1_REMOTE2: Address,
ADDRESS2_REMOTE2: Address2,
};

export default views;`

Now in the remote-entry.ts file for both Remote1 and Remote2 I have something like this:
export { views } from './app/views';

app_container (Host)

In the host app, I am trying to import this modules using loadRemote like this :
`import * as React from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { loadRemote } from '@module-federation/enhanced/runtime';
import Home from './home';

// const Remote1 = React.lazy(() => loadRemote('remote1/Module') as any);
// const Remote2 = React.lazy(() => loadRemote('remote2/Module') as any);

export function App() {
const [Remote1, setRemote1] = React.useState('');

React.useEffect(() => {
loadRemote('remote1/Module').then((module: any) => {
console.log(module);
setRemote1(module.views.ADDRESS1_REMOTE1);
});
}, []);

return (
<React.Suspense fallback={null}>

• 
  Home
  


• 
  Remote 1
  


• 
  Remote 2
  

<Route path="remote1" element={} />
{/* <Route path="remote2" element={} /> */}
<Route path="/" element={} />

</React.Suspense>
);
}

export default App;
`

This is the screenshot of the log and the error. I am not sure what I am doing wrong here. This is a sample app that I am trying to make work so I can use this same architecture for our production application.

Please let me know if you need any more information. I really need to get this resolved before christmas so I can migrate the whole app before offices resumes in full after 2nd week of january.