11

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: enter image description here

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):

enter image description here

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.

Shimi
  • 1,178
  • 8
  • 18
  • The styled-components library is checking for other instances via a global variable. Specifically window['\__styled-components-init_\_']. The only way I see would be either with iframes, since they have their own global scope, or actually sharing the styled-components library via module federation. Though, module federation requires creating a custom webpack.config.js and webpack 5, which is not easy to have with react-scripts since you can't extend the internal webpack.config.js natively. Both solutions restrict the build process quite heavily, so I guess this would be no option? – Mirco S. Apr 08 '21 at 17:35
  • Thanks, @MircoS., I'm having a hard time thinking they won't provide a way to work around this warning in such a common use case. I actually started noticing I'm seeing this warning in other platforms like code-sandbox templates that are using styled components and more. I do think there should be a way to handle this - I'm still searching for it though :) – Shimi Apr 08 '21 at 22:13
  • Is it ok to build each micro frontend separately? – Doppio Apr 13 '21 at 16:46
  • By 'separately', do you mean for each micro frontend to have its own package.json? I think that this is the recommended design as each application is programmed independently. See React's micro frontend code example https://github.com/react-microfrontends – Shimi Apr 13 '21 at 18:37
  • @Shimi did you find a solution? I have same problem. – fsi Feb 02 '23 at 12:16

2 Answers2

1

I was facing the same issue and I solved it by moving all my styled components inside remote apps and exposed them from there.

Nida Munir
  • 461
  • 3
  • 23
  • Thanks @Nida! Were you able to support multiple styled-component versions without seeing the warning in this architecture? Do you have project you can share? – Shimi May 06 '21 at 17:35
  • I used the same version of styled-components. – Nida Munir May 18 '21 at 10:41
0

I had the same issue with my micro-service application. For each micro-service I had package.json file and one global package.json for all micro-service. So, in the global package.json I added resolution, it allowed me to have only one version of styled component for my app

"resolutions": { "styled-components": "4.2.1" },

Also, I used to lerna. It can help you with your micro-service's dependencies.

I hope my answer can help you resolve your problem.

Egor Pashko
  • 354
  • 2
  • 8
  • Thanks @Egor for sharing your insight and experience! Unfortunately, I do need multiple versions of styled-components to run on each micro-frontend app. Restricting the overall app with a single version of styled-components isn't the goal and I was hoping I could have multiple versions running for each app without the console warning. – Shimi Apr 20 '21 at 16:58