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.

[Billybobchops]

@2heal1 Thank you for responding here.

I think I am experiencing something similar to what @yay described in question 5. When I run dev locally everything works great but when I build and serve I also get a blank page. Ultimately, I am experiencing the same issue when deploying to Netlify and following the docs: https://modernjs.dev/en/guides/basic-features/deploy.html#netlify -- I put in a support ticket with Netlify but I think the issue is with ModernJS since I can't locally serve.

Attempting these paths returns 404s (let me know if it'd be helpful to provide the actual URLs)
https://my-remote-app-example.netlify.app/mf-manifest.json
https://my-remote-app-example.netlify.app/dist/mf-manifest.json

At my deployed host app: https://my-host-app.netlify.app/ I am getting:

 'Failed to get manifest' error: Failed to get manifest. #RUNTIME-003
args: {"manifestUrl":"https://my-remote-app-example.netlify.app/mf-manifest.json","moduleName":"remoteDesignSystem"} https://module-federation.io/guide/troubleshooting/runtime/RUNTIME-003

In my Netlify deploy logs I see it's calling $ modern deploy as I would expect and I even see:

12:06:41 PM:   dist/mf-manifest.json                                                            23.1 kB     2.1 kB

But in the Netlify Deploy File Browser and at those URL paths above there is no mf-manifest.json to be found.

Any insight at all into this would be greatly, greatly appreciated as I want to be able to show my team a deployed proof of concept utlizing module-federation and Modern.js. Thank you kindly!