A few issues with Modern.js ssr

[yay]

1. Running the Modern.js SSR example in dev mode works great. But building the host app fails with Cannot find module 'remote/Image' or its corresponding type declarations., which can be fixed by casting the module name to any:

   const RemoteSSRComponent = createRemoteSSRComponent({
       // `npm run build` error: Cannot find module 'remote/Image' or its corresponding type declarations.
       loader: () => import("remote/Image" as any),

   Is there a better way to fix it?

2. How does one get type hinting to work? If I add a prop to the Image component in the provider and try using it in the host app on the imported <RemoteSSRComponent />, I get a type error.

3. Even though TypeScript doesn't recognize the prop, it does work and is passed to the remote Image component. However, every time I change the prop from the host -- e.g. a counter increment -- I see the page flash for a split second with "Loading..." shown in place of both components before they show up again. How do I prevent this from happening?

   const Index = () => {
       const [counter, setCounter] = React.useState(0);
       return (
   	    <div className="container-box">
   		    <button onClick={() => setCounter(counter + 1)}>+1</button>
   		    <RemoteSSRComponent counter={counter} />
   		    <DynamicRemoteSSRComponents />
   	    </div>
       );
   };

   Screen.Recording.2024-10-27.at.10.58.45.PM.mov

4. Running all three apps in dev mode works just fine, but when previewing the production build locally with npm run serve the host fails with a CORS error:
   
   Do you know how to fix this one? I struggled to find anything online and in Modern.js docs.

5. When serving, navigating to http://localhost:3007/mf-manifest.json and http://localhost:3008/mf-manifest.json shows a blank page with only 404 text in it. Is this normal? It doesn't happen when running in dev mode.

6. When running in dev mode, I sometimes see the following host app console errors:
   
   I haven't been able to consistently reproduce it. Do you know what might be causing them?

[2heal1]

hey , for the question 1 , i can not reproduce the error in my local while executing pnpm build in host , have you executed pnpm install in root dir ?

[2heal1]

For the question 2 , it also works on my PC , but i'm not sure whether the monorepo has wrong configuration , so i split the examples , you can try this repo

https://github.com/2heal1/basic-modernjs-ssr-demo

The remote component should have type

[2heal1]

For the question 3 , it's a bug , i will fix it module-federation/core#3139

[2heal1]

For the question 4 , this need you add cors header in browser currently . And i will add one debug plugin for this case

[2heal1]

For the question 5 , because i add devServer.headers in modernjs plugin , so it can work normally in dev mode . But this configuration can not work for modernjs serve , so it can not be accessible. This question is quite the same as question 4 , I think i can solve it by providing a modern-js-mf-debug-plugin.

For workaround, you can use serve package by executing serve dist -C -p [port] to serve provider and dynamic-provider , and pnpm serve to serve host

[2heal1]

For question 6, it should be fixed in a preview version , i will release it next week

[2heal1]

Because in byte , we don't use serve command usually , so i don't consider this case when i develop this feature , very glad you can help point out those issues :D

[romkor]

@2heal1 thank you for explanations. Can you describe what is the best way for serving SSR production apps (host and providers) with module federation plugin enabled.
Or maybe you have example repo where host and all providers are running in prod mode with npx modern deploy && node .output/index.