Cannot compile styled-component with react-typescript because of react-native types

[Tallyb]

True

Describe the bug

when trying to compile a React project with Typescript and also styled-component, a bunch of errors like this one appear:

node_modules/@types/react-native/globals.d.ts:211:5 - error TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'ProgressEvent<XMLHttpRequestEventTarget>', but here has type 'ProgressEvent<EventTarget>'

Steps to Reproduce

1. Create react app with typescript
2. Add styled-components
3. create a component (even a small one), import compiler and try to build

Expected Behavior

Project is successfully compiled.

Running yarn remove @types/styled-components

Additional context

Sadly, this is a long-lasting issue with the styled-components types: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015 One workaround to solve it is to add a .yarnclean file that contains the react-native typescript. However, this is not being picked by the compiler.

Specifications

• Bit version:
• Node version:
• npm / yarn version:
• Platform:
• Compiler / Tester (include version):

[Tallyb]

the current workaround is to completely remove the @types/styled-components and instead use a module declaration as follow:

• under src folder create a @types directory.
• Add a types.d.ts file with the following content:

declare module 'styled-components';

[qballer]

styled-components have several issues with it's types library. They place both react-native and react types which mix poorly. I don't think I can fix it in the context of the compiler (besides applying the workaround in the compiler)