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>
       );
   };

   https://github.com/user-attachments/assets/9b06a193-12d1-457c-a794-06bb08b8b506

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 https://github.com/module-federation/core/pull/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