originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.4k stars 242 forks source link

Add support for using the vite dev server on remotes #551

Open jlillywhite opened 11 months ago

jlillywhite commented 11 months ago

Description

This adds support for using the vite dev server for remotes. This addresses issue 204

Additional context

While this appears to work with the examples and the project where I'm consuming it, I'm not sure that it's very efficient. If there are ways to be more efficient with importShared and its associated module cache I would appreciate the input.

I also didn't find a way to support version checking importShared without copying the satisfy code.

What is the purpose of this pull request?

Before submitting the PR, please make sure you do the following

ruleeeer commented 11 months ago

Great, thank you for your contribution. I previously attempted to add the remoteEntry file in dev mode, but failed due to Vite's bundless characteristic.

ruleeeer commented 11 months ago

When I have some free time, I will start the code review.

hodfords-viet-fe commented 10 months ago

@ruleeeer Please help review this PR, we really need this feature for development. Thanks

AntonyF-Andreani commented 10 months ago

Hi @ruleeeer! Thanks for the time for mantain this awesome plugin!

Maybe I can help you adding some examples or test to evaluate if this PR is possible? (to reduce the time or the responsability of the review)

I would be happy to help!!

ruleeeer commented 10 months ago

@jlillywhite @jlillywhite-mc Thanks for your great work, I tried to test with vue3-demo-esm, but I found that it fails, and since there is no modification to the documentation for this PR, I'm not sure if I'm missing something important in the config

ruleeeer commented 10 months ago

I added a line to packages/examples/vue3-demo-esm/package.json that I can use to test the effect of dev remotes

dev:remotes": "pnpm --parallel --filter \"./home\" --filter \"./css-modules\" --filter \"./common-lib\" --filter \"./dynamic-remote\"  dev"

Or go to packages/examples/vue3-demo-esm/css-modules and execute pnpm dev to see the error as well

image
ruleeeer commented 10 months ago

Hi @ruleeeer! Thanks for the time for mantain this awesome plugin!

Maybe I can help you adding some examples or test to evaluate if this PR is possible? (to reduce the time or the responsability of the review)

I would be happy to help!!

Thanks for providing help !!
I would suggest waiting until this PR fix is complete before adding test cases.

1): Test cases are needed, the easiest way to do this is to add a start dev:remotes to the test project like I said

https://github.com/originjs/vite-plugin-federation/pull/551#issuecomment-1901592831

2): Then change the test dev's script after. Change it so that both hosts and remotes are started with dev.

https://github.com/originjs/vite-plugin-federation/blob/main/packages/examples/vitestSetup-dev.ts#L83-L84

image
jlillywhite commented 10 months ago

Hey, thanks for taking the time to look at this. I will update it with tests and fixes as soon as I can.

kunal-gc commented 9 months ago

Any idea when this will get merged? I also need this.

PicoI2 commented 9 months ago

I tried to use this PR in my project, it does not work for me. I have warnings like 'You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".' and others telling me that some modules are already loaded. I will try to understand why.

jlillywhite commented 9 months ago

I'm still seeing a few issues with sharing images and manually setting package paths. I will continue working on this.

PicoI2 commented 9 months ago

I have noticed that if you use vite-plugin-react, both host and remote have to be in dev mode. If not, you will have this error message "@vitejs/plugin-react can't detect preamble".

PicoI2 commented 9 months ago

I tried to use this PR in my project, it does not work for me. I have warnings like 'You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".' and others telling me that some modules are already loaded. I will try to understand why.

It was because I had enable profiling on the host and not on the remote : resolve: { alias: { "react-dom/client": "react-dom/profiling" } } Without it it is working, I will try continue to test it but it's good news !

jlillywhite commented 9 months ago

I have noticed that if you use vite-plugin-react, both host and remote have to be in dev mode. If not, you will have this error message "@vitejs/plugin-react can't detect preamble".

I ran into this same issue when I was working on this. I'm still working on a clean way to resolve it.

0x0dr1y commented 8 months ago

bump

0x0dr1y commented 7 months ago

@ruleeeer @PicoI2 @jlillywhite How can we help you guys to unblock this and get it merged?

jlillywhite commented 7 months ago

@MrDeerly, I'm primarily a React developer, so it was pretty easy for me to get this working in dev mode for React, but I'm not familiar some of the other UI frameworks, so I'm having trouble tracking down the issues in other frameworks. If you have the expertise to do that, I would love any help I could get.

PicoI2 commented 7 months ago

I think it could be merged as using dev mode is not working at all without this, it's not like it will break anything. I tried this PR in a large project and its working great.

husayt commented 5 months ago

@ruleeeer @flyfishzy this library is currently the only viable way to run MF with vite. As you can see from comments, there is big interest. Would be great if you are able to review and approve PRs. You have made a lot of effort and would be shame to let it waste. Thanks for bringing the project so far, but leaving it midway without even providing any update to the community is letting everyone down.

if you are unable to spend more time on this perhaps you could let some more members of community to keep the project alive.

panvourtsis commented 3 months ago

thanks for your contribution! i tried the suggested one on my project and got the following [vite] Internal server error: May not write null values to stream

image