Shared Packages in Micro Frontend Monorepo — Complete Guide

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