I'm creating a library that depends on Styled-Components. I'm also making an app that depends on my library and Styled-Components. Doing nothing special, I got a warning about two instances of Styled-Components being loaded. After some researching, it seemed that I needed to use webpack externals so as to not compile Styled-Components into my library bundle.
My first question is do I also need to utilize npm's peer dependencies? Is this an orthogonal concept? Anyway, I also added Styled-Components as a peer dependency of my library.
My host app was having lots of problems. So I create a simplified demo app (will post all this to repo's if required). It's just an index.js file that imports my library. I also then npm install Styled-Components. I'm using es6 syntax to import my library and so I add all the obligatory babel packages. I setup my webpack config to bundle my app.
But I get this error:
ERROR in ../libs/ab-chart/dist/bundle.js Module not found: Error: Can't resolve 'styled-components' in '/Users/abollba/Dropbox/all/web/apps/libs/ab-chart/dist'
I've poured over the webpack documentation for hours. I've built, torn down and experimented with every config key endlessly. I am at a point where I'm about to give up. There's just too many factors and confusing errors to know what to even do. I'd tremendously appreciate any help!
Edit (more information):
providing information requested in answers:
3) i include the library in my app like this: import { Chart } from "ab-chart";