@types/styled-components Duplicate identifier FormData

Question

If I add @types/styled-components in my project, I will have a bunch of errors in the build output:

ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15): TS2300: Duplicate identifier 'FormData'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5): TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'BodyInit', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(107,14): TS2300: Duplicate identifier 'RequestInfo'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(126,13): TS2403: Subsequent variable declarations must have the same type.  Variable 'Response' must be of type '{ new (body?: BodyInit, init?: ResponseInit): Response; prototype: Response; error(): Response; redirect(url: string, status?: number): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData, init?: ResponseInit): Response; prototype: Response; error: () => Response; redirect: (url: string, status?: number) => Res...'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(196,5): TS2717: Subsequent property declarations must have the same type.  Property 'abort' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(197,5): TS2717: Subsequent property declarations must have the same type.  Property 'error' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(198,5): TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(199,5): TS2717: Subsequent property declarations must have the same type.  Property 'loadend' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(200,5): TS2717: Subsequent property declarations must have the same type.  Property 'loadstart' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(201,5): TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(202,5): TS2717: Subsequent property declarations must have the same type.  Property 'timeout' must be of type 'ProgressEvent', but here has type 'Event'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(206,5): TS2717: Subsequent property declarations must have the same type.  Property 'onabort' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(207,5): TS2717: Subsequent property declarations must have the same type.  Property 'onerror' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(208,5): TS2717: Subsequent property declarations must have the same type.  Property 'onload' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(209,5): TS2717: Subsequent property declarations must have the same type.  Property 'onloadend' must be of type '(this: XMLHttpRequest, ev: ProgressEvent) => any', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/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', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/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', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/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', but here has type '(this: XMLHttpRequest, ev: Event) => any'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(243,6): TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9297,14): TS2300: Duplicate identifier 'require'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9315,11): TS2451: Cannot redeclare block-scoped variable 'console'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9323,18): TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.   ERROR in /Users/me/projects/react/node_modules/@types/react-native/index.d.ts(9326,11): TS2451: Cannot redeclare block-scoped variable 'navigator'.   ERROR in /Users/me/projects/react/node_modules/@types/webpack-env/index.d.ts(203,13): TS2300: Duplicate identifier 'require'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(5196,11): TS2300: Duplicate identifier 'FormData'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(5206,13): TS2300: Duplicate identifier 'FormData'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(16513,11): TS2320: Interface 'Window' cannot simultaneously extend types 'GlobalFetch' and 'WindowOrWorkerGlobalScope'.   Named property 'fetch' of types 'GlobalFetch' and 'WindowOrWorkerGlobalScope' are not identical.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17406,13): TS2451: Cannot redeclare block-scoped variable 'navigator'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17510,13): TS2451: Cannot redeclare block-scoped variable 'console'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17819,6): TS2300: Duplicate identifier 'RequestInfo'.   ERROR in /Users/me/projects/react/node_modules/typescript/lib/lib.dom.d.ts(17992,6): TS2300: Duplicate identifier 'XMLHttpRequestResponseType'. 

For some reason it adds @types/react-native, which has some collisions with my react app.

I have the next tsconfig.json:

{   "compilerOptions": {     "target": "es5",     "module": "commonjs",     "jsx": "react",     "outDir": "./production/",     "sourceMap": true,     "noImplicitAny": true,     "lib": ["esnext", "dom"],     "resolveJsonModule": true   },   "include": [     "./src/**/*"   ] } 

The problem could be solved with adding exact types in the type property into tsconfig.json:

{   "compilerOptions": {     ...     "types": [       "jest",       "jest-diff",       "react",       "react-dom",       "react-intl",       "react-redux",       "react-router-dom",       "webpack-env",       "styled-components"     ]   },   ... } 

But this solution doesn't look nice to me. Is there any other fix?

Answer 1

Update 21/12/2020

Move the styled-components/native types out of @types/styled-components and into its own package (@types/styled-components-react-native). If someone wants to use styled-components/native, all they need to do is install @types/styled-components-react-native and it will automatically augment the styled-components types (since TypeScript automatically includes any installed @types packages).

This makes it so that the main export (i.e., import styled from 'styled-components') works out-of-the-box (which is the most common usage). And in order to get styled-components/native all you need to do is install the other @types package, which is still easier than having to set types: [] in tsconfig.json.

(Solution copied from the Pull request)

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/49914

Old

I had the same issue and I solved downgrading @types/styled-components to 4.1.8.

You can achieve this by: npm i @types/[email protected] --save-dev --save-exact

This issue is still open for more than 1 year, all you will find are some workarounds.

About the problem, it seems that @types/styled-components require @types/react-native and this is causing problems with DOM lib. That means if you using react for the web you're going to have conflicts because of the react-native typings with the DOM lib. If you are using React-Native, you don't need to downgrade.Try those below if you don't want to downgrade:

For NPM users a possible workaround mentioned in Github is adding:

"postinstall": "rm -rf node_modules/@types/react-native" 

in your package.json to delete the types after you install them.

For yarn users you can create a .yarnclean file and add this content:

@types/react-native 

as mentioned here.

You can find more information in this issue on Github.

Answer 2

Adding "skipLibCheck": true to compilerOptions in the tsconfig.json file solved the issue for me. The solution comes from another project created by a newer create-react-app.

Note: "skipLibCheck": true skips type checking of all declaration files ( *.d.ts ).