Fix React Module Federation (CRA+Craco) with MUI v5/Emotion – remove duplicate runtimes & __emotion_styles crash
Budget: ₹1,500 – ₹12,500 INR
We have two CRA apps using Webpack 5 Module Federation:
Parent (host): React 18.3.1, react-scripts 5, Craco, Redux
Child (remote): React 18.3.1, exposes ./App, served at http://localhost:3002/remoteEntry.js
UI stack in both: MUI v5.18.0 (@mui/material, @mui/system, @mui/styled-engine) and Emotion (@emotion/react 11.14.0, @emotion/styled 11.14.1).
Problem
When loading the remote into the host we still get:
TypeError: Cannot read properties of undefined (reading '__emotion_styles')
MF warnings like “No required version specified for @mui/system”
We already tried aligning versions and sharing singletons, disabling HMR/Fast Refresh, etc. Need an expert to audit & fix the MF setup so only one Emotion/MUI runtime is used at runtime.
What you’ll do
Review both repos (parent + child) and pin & align deps (React, Emotion, MUI incl. @mui/styled-engine).
Fix Module Federation config in both apps:
Share react, react-dom, @emotion/react, @emotion/styled, @mui/material, @mui/system, @mui/styled-engine, @mui/icons-material as singletons (no eager, no ...deps surprises).
Correct publicPath, chunkLoadingGlobal, and remove CRA HMR plugins safely.
Ensure runtime uses one copy of Emotion/MUI (no duplicates in share scope).
Add/confirm StyledEngineProvider with injectFirst at app roots (if needed).
Clean up webpack warnings (“No required version specified…”) in the host.
Provide a short README with steps to run: host:3000, remote:3002, and verify.
Acceptance criteria
Parent renders the Child’s MUI components without __emotion_styles error.
No MF warnings in the console about required versions/eager consumption.
npm ls @emotion/react @emotion/styled @mui/system @mui/styled-engine shows single versions in both apps.
Network shows remoteEntry.js loads (200) and chunks resolve.
Documented steps + diffs/PRs for package.json, craco.config.js, and any code changes.
Tech/skills required
Webpack 5 Module Federation
React 18 / CRA 5 / Craco
MUI v5 & Emotion 11
npm dependency resolution, lockfile hygiene
What we’ll provide
Two Git repos (host + remote)
Current package.json and craco.config.js
Exact error screenshots/logs
Expected local ports (3000 host, 3002 remote)
How to apply
Share a short note on exactly how you’d approach deduping Emotion/MUI with MF.
Link 1–2 similar MF fixes you’ve done (or describe).
Availability and fixed-price quote.
Parent (host): React 18.3.1, react-scripts 5, Craco, Redux
Child (remote): React 18.3.1, exposes ./App, served at http://localhost:3002/remoteEntry.js
UI stack in both: MUI v5.18.0 (@mui/material, @mui/system, @mui/styled-engine) and Emotion (@emotion/react 11.14.0, @emotion/styled 11.14.1).
Problem
When loading the remote into the host we still get:
TypeError: Cannot read properties of undefined (reading '__emotion_styles')
MF warnings like “No required version specified for @mui/system”
We already tried aligning versions and sharing singletons, disabling HMR/Fast Refresh, etc. Need an expert to audit & fix the MF setup so only one Emotion/MUI runtime is used at runtime.
What you’ll do
Review both repos (parent + child) and pin & align deps (React, Emotion, MUI incl. @mui/styled-engine).
Fix Module Federation config in both apps:
Share react, react-dom, @emotion/react, @emotion/styled, @mui/material, @mui/system, @mui/styled-engine, @mui/icons-material as singletons (no eager, no ...deps surprises).
Correct publicPath, chunkLoadingGlobal, and remove CRA HMR plugins safely.
Ensure runtime uses one copy of Emotion/MUI (no duplicates in share scope).
Add/confirm StyledEngineProvider with injectFirst at app roots (if needed).
Clean up webpack warnings (“No required version specified…”) in the host.
Provide a short README with steps to run: host:3000, remote:3002, and verify.
Acceptance criteria
Parent renders the Child’s MUI components without __emotion_styles error.
No MF warnings in the console about required versions/eager consumption.
npm ls @emotion/react @emotion/styled @mui/system @mui/styled-engine shows single versions in both apps.
Network shows remoteEntry.js loads (200) and chunks resolve.
Documented steps + diffs/PRs for package.json, craco.config.js, and any code changes.
Tech/skills required
Webpack 5 Module Federation
React 18 / CRA 5 / Craco
MUI v5 & Emotion 11
npm dependency resolution, lockfile hygiene
What we’ll provide
Two Git repos (host + remote)
Current package.json and craco.config.js
Exact error screenshots/logs
Expected local ports (3000 host, 3002 remote)
How to apply
Share a short note on exactly how you’d approach deduping Emotion/MUI with MF.
Link 1–2 similar MF fixes you’ve done (or describe).
Availability and fixed-price quote.