Menu
I'm running a micro frontend application with multiple React versions, each micro frontend repo is using lazy loading for dynamically loading its React version and it works as expected (Yay!)
The micro frontend app is structured as follows:
That being said, I am experiencing issues with the styled-components multi-versioning, and receiving the following console warning in dev mode (not in production):
For more technical details check out the example repo with the implementation.
Since the application is using CRA to simplify the configurations of webpack/babel I was wondering if there is a good way to improve the initial configuration to resolve this console warning.
I checked the docs link shared on the warning, and while I understand micro frontend wouldn't be the best way to maintain your project, we'd still like to provide this option to our users as they might need to gradually migrate their project versions, so I'm still interested in getting this console warning resolved.
Any tips or suggested solutions would be appreciated.
printed warning:
react_devtools_backend.js:2430 It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason. See https://s-c.sh/2BAXzed for more info.
854
The answer is the same as for any other React component: Keep them in a more top-level folder where it can be imported by more than one component folder. If you change the style of the styled component, check all components which import it.
Styled Components allow you to style any custom component that you've created. First, the custom component must receive the prop className and pass it to the underlying DOM element. Once that is done, pass the custom component to the styled function and invoke it as a Tagged Template to receive a new Styled Component.
Styled-components is a library built for React and React Native developers. It allows you to use component-level styles in your applications. Styled-components leverage a mixture of JavaScript and CSS using a technique called CSS-in-JS.
styled-components supports concurrent server-side rendering with stylesheet rehydration. The basic idea is that every time you render your app on the server, you can create a ServerStyleSheet and add a provider to your React tree that accepts styles via a context API.
I was facing the same issue and I solved it by moving all my styled components inside remote apps and exposed them from there.
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
