How to use styled-components in both piral app-shell and pilet apps?

Question

I am currently working on building a PoC Piral app using the UI framework that was developed in house. This UI framework relies on the styled-components module, which causes issues when both my piral app-shell and pilet app start using those styled components.

When I don't explicitly include styled-compnents I get this error message:

Uncaught Error: Cannot find module 'styled-components'
    at requireModule (dependency.js:7)
    at dependency.js:32
    at Array.map (<anonymous>)
    at define (universalModuleDefinition:3)
    at webpackUniversalModuleDefinition (universalModuleDefinition:7)
    at universalModuleDefinition:12

When I do add styled-components as a dependency, I get this error message and the piral app-shell fails to render:

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.

Answer 1

I found the answer in the documentation

I had to list those dependencies in the piral app-shell's package.json file like so:

"pilets": {
    "externals": [
      "styled-components",
      "<internal ui framework>"
    ]
  }

After I did that, all the issues were resolved.