Shared Packages in Micro Frontend Monorepo — Complete Guide

Source: Dev.to

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 the Products MFE created its own Redux store instance. The 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 them everywhere.

Shared packages that hold a production MFE monorepo together

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

@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

@myapp/uicomponents — Shared UI

• CustomToast with react-hot-toast configuration
• Reusable 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.

Both are required:

• Aliases alone → each MFE bundles its own copy.
• Singleton alone → import path not resolved, leading to duplicate bundles.

Environment configuration

• Local: uses localhost ports.
• Production: uses Nginx paths.

Both configurations are shown side‑by‑side in the source code.

Further reading

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