Shared Concepts Study Portal

Common pitfalls

1. Version Conflicts

Problem: Different micro frontends use different versions of shared libraries.

Solution:

// Use singleton pattern for critical libraries
shared: {
  react: {
    singleton: true,
    strictVersion: true,
    requiredVersion: '^18.2.0'
  }
}

2. Performance Issues

Problem: Loading too many micro frontends slows down the app.

Solution:

• Use code splitting and lazy loading
• Implement intelligent preloading
• Monitor bundle sizes

// Lazy load with prefetch
const ProductsMFE = lazy(() => {
  const promise = import('products/ProductList');
  // Prefetch during idle time
  requestIdleCallback(() => promise);
  return promise;
});

3. Styling Conflicts

Problem: CSS from different micro frontends conflicts.

Solution:

• Use CSS Modules or CSS-in-JS
• Implement naming conventions
• Use Shadow DOM

4. State Management Complexity

Problem: Sharing state between micro frontends is complex.

Solution:

• Minimize shared state
• Use event-driven communication
• Implement a shared state library only when necessary