Typescript, Primer Components, Styled-Components don't play nice

[xtellurian]

tl;dr the dependency on styled components is bad for typescript users.

Hey primer components team,

I know this isn't an issue directly with this repository or with Primer Components, but it greatly affects the experience of getting started with Primer Components, and I wanted to share it with you.

I'm using react + typescript in a brand new project. I wanted to use primer components because they look cool and fit a style I'm looking for. OK, should be easy, just yarn add @primer/components...

That worked OK, but now when I try to use the components, I get a error:

Module not found: Can't resolve 'styled-components'

bit odd, but OK, I'll install styled-components yarn add styled-components

and now a typescript compilation error:

Duplicate identifier 'FormData'. TS2300

Looking into it, I found these issues:

1. The maintainers at styled-components don't seem to care
   Duplicate identifier 'FormData'. TS2300 styled-components/styled-components#2842

2. The maintainers at definitely types haven't been able to resolve the issue.
   node_modules/@types/react-native/globals.d.ts (36,15): Duplicate identifier 'FormData'. DefinitelyTyped/DefinitelyTyped#33311

For me it was easier to just remove Primer Components and I'll use something else, but I assume that's not the experience you're looking for. I hope this was helpful :)

[BinaryMuse]

Thanks for the bug report; I've done some digging and it looks like this has bitten us in our own internal apps as well. While there isn't a perfect solution at the moment, there is some guidance for workarounds that we could add to the documentation. I'll get that added soon and will ping this issue when I do.

[BinaryMuse]

@xtellurian I've opened a PR to add this information to the docs; you can take a look at #785 and see what we recommend as a course of action. Unfortunately, there's not anything we can do to totally fix the root issue.

[BinaryMuse]

Closed (best we can for now) in #785