Add support for using the vite dev server on remotes

[jlillywhite]

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?

• Bug fix
• New Feature
• Documentation update
• Other

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

• Read the Code of Conduct and follow the Commit Convention guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[ruleeeer]

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]

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

[hodfords-viet-fe]

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

[AntonyF-Andreani]

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]

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

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

[ruleeeer]

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

#551 (comment)

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

[jlillywhite]

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]

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

[PicoI2]

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]

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

[PicoI2]

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]

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]

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.

[MrDeerly]

bump

[MrDeerly]

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

[jlillywhite]

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

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.