search

originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.3k stars 236 forks source link

Dev mode in the host #410

Open norman-ags opened 1 year ago

norman-ags commented 1 year ago

Versions

Hi! I'm trying to run this demo of Jack in dev mode: https://youtu.be/t-nchkL9yIg but it failed to work.

The readme of this project says: Only the Host side supports dev mode, the Remote side requires the RemoteEntry.js package to be generated using vite build. This is because Vite Dev mode is Bundleless and you can use vite build --watch to achieve a hot update effect.

Reproduction

This repo from Jack https://github.com/jherr/vite-mod-fed

Steps to reproduce

In the host:

  1. Run dev

In the remote:

  1. Run build
  2. Run preview

What is Expected?

Should not break the host app and the microfrontend should load.

What is actually happening?

From what I understand in the README, dev mode should work fine in the host, but I'm getting an error in the browser console:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

And the whole app breaks.

mjangir commented 1 year ago

@norman-ags Did you find a solution to this as I'm also having the same issue. One thing I noticed is, it is working fine in localhost but not in 127.0.0.1.

maxdreisbusch commented 1 year ago

@mjangir @norman-ags did you already find a solution?

norman-ags commented 1 year ago

No. ATM it's fine for us to run all in preview. For dev mode, we run each microfrontend independently.

lasharela commented 1 year ago

this is weird. 127.0.0.1 is failing, localhost is working.

ruleeeer commented 1 year ago

I tried the latest version v1.2.3 and indeed encountered the issue. It works fine when I use localhost, but there are problems when I switch to 127.0.0.1.

ruleeeer commented 1 year ago

Tried it out and it's strange that when not using server:{host: 127.0.0.1} to bind the host to 127.0.0.1, accessing 127.0.0.1 directly will be refused.

ruleeeer commented 1 year ago

Dependent on this PR, both 127.0.0.1 and localhost can be used normally after configuring server:{host:127.0.0.1}. The latest Release does not yet contain this part of the code, which makes it impossible to use server:{host:127.0.0.1} directly even if it is configured 127.0.0.1 access

philals commented 1 year ago

For some reason I had server:{host:127.0.0.1} configured. Changing it to server:{host:"localhost"} fixed it. Thanks

sayeed0209 commented 5 months ago

It would be immensely beneficial if we could resolve this issue, enabling real-time updates to be visible from the host when working with the MF architecture.

CosmeValera commented 4 months ago

It would be immensely beneficial if we could resolve this issue, enabling real-time updates to be visible from the host when working with the MF architecture.

That's exactly also what I want. The best I've been able to get is to have the vite build and preview in one command, to enable module federation, with this:

"preview:watch": "concurrently \"vite preview --port 4001 -l silent\" \"vite build --watch\""

But it does not have HMR, nor does it can have.

So there's where having the module federation vite plugin should allow to create the remoteEntry.js with dev mode would be really helpful. This way we could have HMR with VITE when using MF. Hopefully some day we will have it as an option to enable

Waqqars987 commented 2 months ago

It would be immensely beneficial if we could resolve this issue, enabling real-time updates to be visible from the host when working with the MF architecture.

That's exactly also what I want. The best I've been able to get is to have the vite build and preview in one command, to enable module federation, with this:

"preview:watch": "concurrently \"vite preview --port 4001 -l silent\" \"vite build --watch\""

But it does not have HMR, nor does it can have.

So there's where having the module federation vite plugin should allow to create the remoteEntry.js with dev mode would be really helpful. This way we could have HMR with VITE when using MF. Hopefully some day we will have it as an option to enable

Somtimes, the preview command finishes ealier than the build watch command which fails the ouput of the preview command. Is there a way make the preview command run only after the build watch command?