Senior LevelReact JS & React 19
How do you architect enterprise micro-frontends using React and Webpack/Vite Module Federation?
❓ Interview Prompt: Explain Micro-Frontends architecture, Webpack/Vite Module Federation, Host vs Remote applications, and shared singleton React runtimes.
Module Federation allows multiple independently deployed React applications (Micro-Frontends) to dynamically share code and components at runtime:
Key Architectural Challenge:
•
Shared Singleton React Runtime: Must configure 'shared: { react: { singleton: true, eager: true } }' in Module Federation configuration. Loading multiple separate instances of React breaks hook state management and triggers invalid hook call errors!
Code Implementation Example
javascript
// webpack.config.js - Module Federation Plugin configuration
new ModuleFederationPlugin({
name: 'host_app',
remotes: {
dashboard: 'dashboard@https://cdn.example.com/remoteEntry.js',
},
shared: {
react: { singleton: true, requiredVersion: '^19.0.0' },
'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
},
});💡Configuring Webpack Module Federation shared React singleton runtime.
🎯 Interview Key Takeaway
Configure React as a singleton dependency in Module Federation to prevent multiple React instance crashes in micro-frontends.
#Micro-Frontends#Module Federation#Architecture#Senior
Back to all React JS & React 19 Questions→