ModuleNotFoundError: Module not found: Error: Default condition should be last one
Hi! I tried to use this module to ignore airbnb-js-shims from storybook. It works with cjs, but doesn't work with esm, there is webpack error:
ERROR in ../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js 2:0-25
Module not found: Error: Default condition should be last one
manager (webpack 5.73.0) compiled with 1 error in 11652 ms
How do I share a MUI 5 theme across multiple micro front ends using Module Federation
I currently have multiple React v17 apps which utilise Module Federation from Webpack 5. I would like for my MUI 5 theme to be shared across all of these micro frontends without having a there own ThemeProvider wrapped around each exposed component. At present, APP 1 (Shell) adds a custom theme into the MUI ThemeProvider and all Micro UI's are lazy loaded as children. The custom theme works for the container components but not for the micro frontend components. I am following a micro frontend architecture with the following configuration:
APP 1 (Shell) - Primary role is manage authentication, wrap theme and consume page components from other micro frontends.
APP 2 (Home Page) - Expose page component and rely on theme rendering from shell.
APP 3 (Another page etc..) - Expose page component and rely on theme rendering from shell.
Do you really want to share a theme? When you updated the theme you will need to update all your micro frontends.
I use MUI with module federations and I prefer to have micro frontends with their own ThemeProviders.
Changes do not use logical operators. Instead regex is being used for simplicity.
I tried benchmarking the logical operators and regex using process.hrtime.bigint() and there's a few 100 nanoseconds of difference between the two approaches (using regex on a single character compared to logical operations on a single char code).
Please do suggest if you have any better approach for the solution.