Definitelytyped: Since v4.1.9, lots of errors related to @types/react-native on web project

[davnicwil]

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @Igorbek @Igmat @Lavoaster
  
  

TS v3.4.3
styled-components v4.2.0
@types/styled-components v4.1.9 and above

In every version since v4.1.9 I get a lot of errors about @types/react-native/global.d.ts on build - I've copied a few of these below.

I'm using styled-components in a React web project. From digging around I think that these conflicts are caused by react-native declaring types globally that conflict with types in node/the dom.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:210:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onloadstart' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:211:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onprogress' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:212:5
    TS2717: Subsequent property declarations must have the same type.  Property 'ontimeout' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
    TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9542:18
    TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9545:11
    TS2451: Cannot redeclare block-scoped variable 'navigator'.

With version 4.1.8 of @types/styled-components, I don't get these errors.

I noticed from 4.1.8 -> 4.1.9 package.json incuded @types/react-native in dependencies and this is very likely related, I'd assume.

v4.1.8

 "dependencies": {
    "@types/node": "*",
    "@types/react": "*",
    "csstype": "^2.2.0"
  },

v4.1.9

"dependencies": {
    "@types/react": "*",
    "@types/react-native": "*",
    "csstype": "^2.2.0"
},

I guess I'm fine just sticking on 4.1.8 but just curious as to what the cause of this is? Do I need to change my own typescript config in some way to tell it not to include transitive dependencies on react-native?

[avin-kavish]

There are some deviations from the Living Standard such as ProgressEvent missing. I'll try to fix this. Is that list of errors exhaustive?

[davnicwil]

It's not exhaustive, there were many more, they all relate to conflicts between react-native and dom I believe so thought they might be a bit redundant. I can paste the full list though if that would be helpful?

[shunia]

The version number now is "@types/styled-components": "^4.1.14",, and the error caused by the react-native dependency still exists:

ERROR in [at-loader] ./src/Entry.tsx:6:32
    TS2305: Module '"../../../../../../../../Users/huangqingfeng/Documents/code/membership/Client/Game/node_modules/@types/react-router-dom"' has no exported member 'browserHistory'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:36:15
    TS2300: Duplicate identifier 'FormData'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:107:14
    TS2300: Duplicate identifier 'RequestInfo'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
    TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9542:18
    TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9545:11
    TS2451: Cannot redeclare block-scoped variable 'navigator'.

[0xdeafcafe]

Is there an update on this?

[s-h-a-d-o-w]

I guess this is the same problem as this?

And since the title of neither one begins with [@types/styled-components], I wonder whether any of the maintainers have even noticed them.

[0xdeafcafe]

The authors were tagged in the first post, so _hopefully_ they have seen it. Although half a year with no reply is pretty weak.

There were some pretty hacky solutions in that thread though, the cleanest I think is this:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311#issuecomment-494477593

[marcoonroad]

July 2020, the world has changed a lot, and I still have this problem...

[mirik999]

It is not best practice but while we cant find any solution we can use
//@ts-ignore
import styled from 'styled-components';