Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

A few issues with Modern.js ssr #4298

Open
yay opened this issue Oct 27, 2024 · 8 comments
Open

A few issues with Modern.js ssr #4298

yay opened this issue Oct 27, 2024 · 8 comments

Comments

@yay
Copy link

yay commented Oct 27, 2024

  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:
    Screenshot 2024-10-27 at 10 02 37 PM
    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: Screenshot 2024-10-27 at 10 30 15 PM
    Screenshot 2024-10-27 at 10 35 46 PM
    I haven't been able to consistently reproduce it. Do you know what might be causing them?

@2heal1
Copy link
Member

2heal1 commented Oct 30, 2024

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
Copy link
Member

2heal1 commented Oct 30, 2024

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
image

@2heal1
Copy link
Member

2heal1 commented Oct 30, 2024

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

@2heal1
Copy link
Member

2heal1 commented Oct 30, 2024

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

@2heal1
Copy link
Member

2heal1 commented Oct 30, 2024

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
Copy link
Member

2heal1 commented Oct 30, 2024

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

@2heal1
Copy link
Member

2heal1 commented Oct 30, 2024

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
Copy link

romkor commented Dec 17, 2024

@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.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants