❗ Blank Page on Reload with Vite Module Federation (Host ↔ Remote Circular Dependency + Shared Scope Issue)

[vijaygovani]

❗ Blank Page on Reload with Vite Module Federation (Host ↔ Remote Circular Dependency + Shared Scope Issue)

📌 Description

I am working on a React + Vite Micro Frontend architecture using vite-plugin-federation, with multiple applications sharing modules between each other.

The setup involves bi-directional module federation, where both Host and Remote apps consume each other.

---

🧩 Project Structure

🔹 Host App (Port: 5001)

• Exposes:

  • Header
  • Login
  • Dashboard
  • hostCss

• Consumes Remotes:

  • core (5002)
  • brm (5003)

---

🔹 Core App (Port: 5002)

• Exposes:

  • remoteCoreApp

• Consumes Remote:

  • host (Header, Login, Dashboard, hostCss)

---

🔹 BRM App (Port: 5003)

• Exposes:

  • remoteBRMApp

• Consumes Remote:

  • host (Header, Login, Dashboard, hostCss)

---

🔁 Dependency Pattern

Host → Core
Host → BRM

Core → Host
BRM → Host

This creates a circular (bi-directional) federation dependency.

---

✅ Expected Behavior

• Core and BRM load inside Host
• Shared components (Header, Login, Dashboard) work across apps
• Page reload should reinitialize all modules correctly

---

❌ Actual Behavior

• Running only Host → works correctly

• Running Host + Core + BRM:

  • ❌ On browser reload → blank screen
  • No UI rendered

---

🔍 Detailed Observations

• Issue occurs specifically after refresh

• Remote modules fail to render even though:

  • remoteEntry.js is accessible

• No consistent error in console

• In some cases:

  • import("remote/module") silently fails
  • React Suspense fallback not triggered

---

⚠️ Suspected Root Cause

Based on behavior, the issue seems related to:

1. Circular Federation Dependency

• Host stand alone
• Core/BRM depend on Host - remote to load some component
• This may break module resolution order during reload

---

2. Shared Scope Initialization Timing

• Shared libs (react, react-dom, redux) may not be initialized before remote usage
• On reload, federation runtime may fail to resolve shared modules

---

3. Eager/Dynamic Import Conflict

• Remotes may be imported before federation runtime is fully ready

• Especially when using:

  • direct imports instead of lazy loading

---

4. CSS/Side Effects (hostCss)

• Shared CSS exposed from Host may not load correctly in remotes during refresh

---

⚙️ Tech Stack

• React
• Vite
• vite-plugin-federation
• Redux Toolkit

---

📦 Federation Config (Simplified)

Host

remotes: {
  core: "http://localhost:5002/remoteEntry.js",
  brm: "http://localhost:5003/remoteEntry.js",
}

Core / BRM

remotes: {
  host: "http://localhost:5001/remoteEntry.js",
}

---

🧪 Steps to Reproduce

1. Start Host (5001)
2. Start Core (5002)
3. Start BRM (5003)
4. Open Host in browser
5. Page loads correctly
6. Refresh browser
7. ❌ Blank page appears

---

❓ Questions

1. Is bi-directional federation (Host ↔ Remote) officially supported in vite-plugin-federation?

2. Does circular dependency break shared scope initialization on reload?

3. Is there a required pattern for:

   • sharing components from Host to Remotes
   • avoiding runtime timing issues?

4. Should remotes avoid consuming host entirely?

---

💡 Additional Notes

• Using lazy loading (React.lazy) improves stability slightly but does not fully fix the issue
• Standalone remotes require fallback handling for host imports
• Issue does NOT occur when remotes are not running

---

🙏 Expected Guidance

Looking for:

• Recommended architecture pattern (unidirectional vs bi-directional)
• Proper way to share common modules (Header, Layout, CSS)
• Fix or workaround for reload issue

---

Thank you!