DEV Community: Srinu Web developer

Mixing React + Next.js Micro Frontends in One Host (Hybrid MFE Architecture)

Srinu Web developer — Thu, 30 Apr 2026 09:32:41 +0000

$ next build
ReferenceError: window is not defined
    at /apps/Main/.next/server/pages/login.js

Your Next.js host has been running fine. You add one new remote — a React MFE built with ModuleFederationPlugin — and the server build dies on hydration.

The fix is NOT to rewrite the React remote in Next.js. It's to know that a single NextFederationPlugin host can load BOTH plugin types simultaneously. The remote URL pattern alone tells Module Federation which plugin built each remote.

The full guide covers:

Dual-plugin host config — one next.config.js declaring 4 React + 2 Next.js remotes
URL pattern table — /auth/remoteEntry.js (React, ONE file) vs /products/_next/static/{ssr|chunks}/remoteEntry.js (Next.js, TWO files)
The isServer ternary — only on Next.js remotes, never on React ones (no /ssr/ folder exists)
ssr: false mandatory — even for Next.js remotes that have an SSR entry, because Redux + window
Bridge pattern — onNavigate prop keeps React remotes framework-agnostic
basePath + assetPrefix — prevent /_next/static/chunks/ collisions
Same shared singleton config for both plugins — @myapp/store, react, redux
Nginx reverse proxy — static files for React remotes, proxy_pass for Next.js Node.js processes
8 production pitfalls with WRONG/FIX side-by-side

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/nextjs/mixing-react-nextjs-micro-frontends

Setting Up a Next.js Micro Frontend Host App: Complete Guide

Srinu Web developer — Mon, 20 Apr 2026 10:12:44 +0000

Your Next.js Module Federation setup builds fine. Remotes appear to load. Components render blank.

No errors. No stack trace. Nothing.

# Missing from your package.json:
"dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 5000"

Without that flag, Next.js uses its internal bundled webpack instead of the locally installed webpack 5. The Module Federation plugin needs access to webpack's container API — the bundled version doesn't expose it.

Your remotes will attempt to load but the container negotiation fails silently.

The full guide covers:

Complete production next.config.js with NextFederationPlugin
React remotes vs Next.js remotes path differences (isServer ternary)
Why eager: true breaks SSR hydration in Next.js
Shared Redux singleton setup across host + all remotes
next/dynamic with ssr: false for remote loading
PWA + Bundle Analyzer wrappers
CSP headers for Module Federation
18 code examples with local vs production configurations

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/nextjs/nextjs-micro-frontend-host-app-setup

Module Federation Shared Dependencies - Singleton Guide

Srinu Web developer — Thu, 16 Apr 2026 10:04:15 +0000

Uncaught Error: Invalid hook call.
You might have more than one copy of React in the same app.

If you are using Webpack Module Federation with multiple micro frontends, this error means you have duplicate React instances in memory.

Every MFE bundles its own React, ReactDOM, and Router by default. With 5 remotes, that is 5 copies of React the browser loads, parses, and executes. The performance waste is bad. But the real problem is hooks breaking - two React instances means two separate hook registries that cannot talk to each other.

The fix is Module Federation's shared config with singleton: true. But there is more to it than copy-pasting one config line.

What the full guide covers:

The duplicate bundle problem - real KB numbers showing 57% reduction
singleton: true vs false - step-by-step runtime behavior
requiredVersion strategies - 4 different approaches with trade-offs
strictVersion and eager - when to use each (React vs Next.js)
Host vs Remote shared config - why they are different
What to share vs NOT share - decision table with 11 libraries
Runtime debugging - inspecting __webpack_share_scopes__ in DevTools

All code examples from a production micro frontend monorepo.

Read the full guide with code examples: https://blog.srinudesetti.in/micro-frontend/react/shared-dependencies-singleton-pattern

Module Federation Host and Remote Apps — Setup Guide

Srinu Web developer — Sun, 12 Apr 2026 11:03:42 +0000

// Your host loads a remote — it crashes. The ENTIRE app goes blank.
const ProductList = React.lazy(() => import("Products/ProductList"));

// Fix: Add .catch() to prevent cascading failures
const ProductList = React.lazy(() =>
  import("Products/ProductList").catch((err) => ({
    default: () => <div>Products module unavailable</div>,
  }))
);

This is one of the patterns most teams miss when setting up Module Federation. The host app and remote apps have very different responsibilities, and getting the architecture wrong leads to cascading failures, permission gaps, and production deploy issues.

Article 13 in my Micro Frontend series covers:

Host app architecture — Layout shell, routing, Redux Provider, and bootstrap pattern
Remote app structure — Standalone development on isolated ports (4001-4011)
Error handling — Two layers: .catch() for load failures + ErrorBoundary for render failures
Permission-based routing — Check Redux store permissions before loading remotes
Bi-directional federation — An app as both host AND remote
React vs Next.js host — React.lazy() vs next/dynamic with ssr: false
Production deployment — publicPath must match the reverse proxy route

Every example comes from a real production monorepo with 11 remote MFEs.

Read the full guide with code examples: https://blog.srinudesetti.in/micro-frontend/react/host-and-remote-apps

Webpack Module Federation — Complete Guide for Micro Frontends

Srinu Web developer — Mon, 06 Apr 2026 11:16:01 +0000

Error: Invalid hook call. Hooks can only be called inside
       the body of a function component.

You've seen this error. Your component works in isolation. But the moment you load it as a Module Federation remote inside the host — hooks crash.

The cause: React loaded twice. Module Federation shared your component code, but not React itself. Two React instances mean two internal state trees, and hooks break immediately.

The fix is one line — singleton: true — but Module Federation has 5 more configuration traps that will bite you in production:

Remote URLs change completely between local (https://localhost:4002/remoteEntry.js) and production (/products/remoteEntry.js)
publicPath must match the reverse proxy route — mismatch = 404 on every chunk after remoteEntry.js loads
The bootstrap pattern is required — without import("./bootstrap"), shared deps fail before negotiation happens
remoteEntry.js is NOT your bundle — it's a ~5KB manifest that registers window.Products for on-demand chunk loading
requiredVersion doesn't enforce — with singleton, the first-loaded version always wins. It only warns.

I wrote a complete guide with real webpack configs for host and remote (both local dev and production), all exposed modules mapped, shared dependency configuration with the singleton pattern, how remoteEntry.js works step by step, and a debugging checklist for the 5 most common errors.

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/react/webpack-module-federation-complete-guide

Tailwind CSS in Micro Frontend Monorepo — Setup Guide

Srinu Web developer — Sun, 05 Apr 2026 11:09:52 +0000

// Production build output:
// styles.css — 0 classes generated
// ERROR: @tailwind directives treated as plain text

This happens when you set up Tailwind CSS in a micro frontend monorepo the same way you would in a standard React app. It does not work that way.

Each MFE is an independent Webpack build. Tailwind is a PostCSS plugin that runs at build time inside postcss-loader. A single root-level tailwind.config.js will NOT be resolved by apps in apps/products/ — each app needs its own.

The content paths also differ between host and remote MFEs. The host scans ./src/**, ./public/**, and ./index.html. Remotes only scan ./src/** and ./src/index.html because they are loaded into the host at runtime.

What the full guide covers:

Step-by-step installation — root + per-app dependencies with npm workspaces
Per-MFE tailwind.config.js — host vs remote content path differences
PostCSS + Webpack wiring — the 3-loader chain (MiniCssExtractPlugin -> css-loader -> postcss-loader)
Why CSS is NOT shared via Module Federation — build-time vs runtime
Shared Tailwind presets — consistent theming without duplicating configs
CSS isolation with prefix — when and why to use it
5 common mistakes — wrong content paths, root-level config, missing postcss-loader, and more

Read the full guide with code examples from a real production monorepo:
https://blog.srinudesetti.in/micro-frontend/react/tailwind-css-micro-frontend-monorepo

Webpack 5 Configuration for Micro Frontends — Complete Guide

Srinu Web developer — Sun, 29 Mar 2026 09:37:41 +0000

publicPath: "https://localhost:4002/"

That one line cost me 3 hours in production. Every chunk after remoteEntry.js returned 404. The fix? Change it to publicPath: "/products/".

The Webpack config you use for local Micro Frontend development is fundamentally different from what you deploy. 7 settings change between environments, and most tutorials only show one config.

What this article covers

Every section of the Webpack 5 config for Micro Frontends, shown TWICE — local development AND production — side by side:

Entry & Output

Host uses publicPath: "/" in both environments
Remotes use https://localhost:PORT/ locally, /mfe-name/ in production
Production adds [contenthash] for long-term caching

Babel Loader

Standard: only processes src/
Monorepo: MUST include ../../packages for shared package JSX
Forgetting this = SyntaxError: Unexpected token < at runtime

Dev Server

Local: HTTPS (mkcert), CORS headers (Access-Control-Allow-Origin: *), historyApiFallback
Production: No devServer at all — Nginx serves static files

Why HTTPS is required locally:
Module Federation loads remote code via `

article link :- https://blog.srinudesetti.in/micro-frontend/react/webpack-5-configuration-micro-frontend

Shared Packages in Micro Frontend Monorepo — Complete Guide

Srinu Web developer — Sat, 28 Mar 2026 11:28:23 +0000

Your Micro Frontend has a silent bug and you don't know it yet.

The user logs in on the Auth MFE. The auth token gets saved to the Redux store. They navigate to Products — a different MFE loaded via Module Federation. The Products page says they're not logged in.

Why? Because Products MFE created its own Redux store instance. Auth MFE has a separate instance. Two stores. Two states. Completely out of sync.

This is the #1 problem teams hit when they build Micro Frontends without shared packages.

What are shared packages?

Internal libraries inside your monorepo that ALL MFEs consume. Instead of each MFE building its own API layer, its own Redux store, and its own UI components, you build them ONCE in packages/ and import everywhere.

In this article, I break down the 3 packages that hold a production MFE monorepo together:

1. @myapp/api — Shared API Layer

Full axios instance with request interceptors (JWT token attachment) and response interceptors (401 handling + token refresh)
Failed request queue — when a token expires, multiple API calls fail simultaneously. Without the queue, each triggers its own refresh. The queue holds them, refreshes once, then retries all.
Domain-organized API folders: Inventory-Apis/, Products-Apis/, Order-Apis/, each containing real CRUD functions
File upload handling with FormData + progress tracking
Asset URL resolution

2. @myapp/store — Shared Redux Store

configureStore() with auth reducer
Complete authSlice: 7 reducers (setIsLoggedIn, setAuthToken, setSessionExpired, setUserInfo, setSellerProfile, setLoading, updateUser) + 9 selectors
Custom hooks (useAppDispatch, useAppSelector) ready for TypeScript
Barrel export pattern — one import path for everything
Module Federation singleton: true ensures ONE store instance across all MFEs

3. @myapp/uicomponents — Shared UI

CustomToast with react-hot-toast configuration
Button and Card components
Change the design once, every MFE updates automatically

The critical wiring:

Webpack resolve.alias maps @myapp/store to ./../packages/core/store at BUILD time
Module Federation shared: { singleton: true } deduplicates the package at RUNTIME
You need BOTH. Aliases alone = each MFE bundles its own copy. Singleton alone = import path not resolved.
Local config uses localhost ports. Production uses Nginx paths. Both shown side by side.

Every code block is from a real production monorepo with 11 independently deployable React MFEs.

Read the full guide with 15 code blocks:
https://blog.srinudesetti.in/micro-frontend/react/shared-packages-micro-frontend-monorepo

React Micro Frontend Monorepo Setup with Turborepo

Srinu Web developer — Thu, 26 Mar 2026 09:53:57 +0000

"Just npm run dev."

That one command starts 12 React applications on 12 different ports — all in parallel. No Docker. No separate terminal tabs. No manual startup scripts.

How? Turborepo + npm workspaces + Webpack 5 Module Federation.

I just published a step-by-step guide for setting up a React Micro Frontend monorepo from scratch. Every config comes from a production system with 11 React MFEs on ports 4000–4011.

What you'll build:

→ Root package.json with npm workspaces
→ turbo.json pipeline config (build, dev, start)
→ Host webpack.config.js — LOCAL and PRODUCTION (they're different!)
→ Remote MFE webpack.config.js — LOCAL and PRODUCTION
→ The async boundary pattern (import('./bootstrap')) and why it's required
→ Shared @myapp/store (Redux singleton) and @myapp/api (axios interceptors)
→ Host App.jsx with lazy-loaded routes for 11 MFEs
→ PostCSS + Tailwind config per MFE
→ Common mistakes table with 6 errors, causes, and fixes

Key insight: Local dev uses https://localhost:PORT/remoteEntry.js with mkcert certificates. Production uses /products/remoteEntry.js with Nginx routing. The webpack configs are significantly different — and most tutorials only show one.

Read the full guide:
https://blog.srinudesetti.in/micro-frontend/react/react-micro-frontend-monorepo-turborepo

Article 8 of 50 in my Micro Frontend series — this is the first article in Section 2 (React MFE). We're moving from fundamentals to hands-on implementation.

Micro Frontend vs SPA: Which Architecture Should You Choose?

Srinu Web developer — Wed, 25 Mar 2026 09:32:59 +0000

Your SPA was perfect at 3 developers. At 8 developers, it's a war zone.

Merge conflicts every morning. A broken Support page blocking the Cart team's release. 5-minute builds that used to take 20 seconds. And a 2.8 MB bundle that loads chart.js, leaflet, and xlsx on the homepage — where nobody needs them.

Sound familiar?

I just published a deep-dive comparing SPA and Micro Frontend architectures with 15 real code blocks showing both approaches side by side:

What you'll see:

→ SPA webpack.config.js vs MFE webpack.config.js (Local AND Production — they're different)
→ SPA routing (all routes in one file) vs MFE routing (lazy-loaded remote apps)
→ SPA deployment (one build, one deploy, one bottleneck) vs MFE deployment (30-second independent builds)
→ SPA bundle problem (2.8 MB all upfront) vs MFE targeted loading (150-300 KB per MFE)
→ React Host (ModuleFederationPlugin) vs Next.js Host (NextFederationPlugin) — the config is NOT the same
→ Turborepo pipeline for parallel MFE builds
→ 4-step strangler migration pattern from SPA to MFE

This isn't "MFE is better than SPA." I show you exactly when SPA is the RIGHT choice (small team, single domain, fast MVP) and when MFE becomes necessary.

Every code block is from a production system with 7 MFEs running on independent ports.

Read the full comparison:
https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-vs-spa

Micro Frontend vs Microservices: What's the Difference?

Srinu Web developer — Mon, 23 Mar 2026 10:28:54 +0000

"Micro Frontend is just Microservices for the frontend."

I hear this in every architecture discussion. And it's wrong.

They share the same philosophy — decompose a monolith into independently deployable units. But the implementation? Completely different layers, different tools, different problems they solve.

Here's what most articles won't show you:

The real confusion starts when you need BOTH.

Your Products MFE calls the Product Service. Your Cart MFE calls the Cart Service AND the Logistics Service. Your Auth MFE and Account MFE both call the same User Service. One-to-many. Many-to-one. Through an API Gateway. With a shared axios singleton handling JWT refresh across every MFE.

In this article, I break down:

📐 Side-by-side comparison across 14 dimensions (layer, communication, deployment, database, scaling, gateway, team ownership...)
🔗 How MFEs connect to Microservices through a shared API config pattern — real production code
🏗️ What a real Express.js microservice looks like (CORS, health checks, Kubernetes probes)
🐳 Docker Compose running MFEs + Microservices + Nginx + MongoDB together
⚠️ 3 misconceptions that lead teams to over-engineer
🧭 Decision flowchart: When to adopt MFE only, Microservices only, both, or neither

Every code block is from a real production system — not toy examples.

Read the full guide with 10+ code blocks, architecture diagrams, and decision framework:

👉 https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-vs-microservices

This is Article 6 in my 50-article Micro Frontend series — from fundamentals through Kubernetes deployment, all based on a real 12-MFE + 8-microservice production system.

Micro Frontend Folder Structure: Best Practices Guide

Srinu Web developer — Sun, 22 Mar 2026 09:48:25 +0000

How you organize your Micro Frontend project determines how easy it is to develop, build, deploy, and scale.

In this guide, I cover:

Monorepo vs Polyrepo comparison
The recommended two-directory structure (apps/ + packages/)
React Remote MFE internal structure with bootstrap.js
React Host vs Next.js Host — when to use each (they are independent, not competing)
Local vs Production webpack/next.config differences (with code tabs)
Shared packages: Redux store, API layer, UI components
Turborepo pipeline configuration
Infrastructure co-location (Docker + Kubernetes)
Anti-patterns to avoid

Every example is from real production projects.

Read the full article: https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-folder-structure