CODEWITHSUNDEEP
reactjstypescriptstyled-components
Jeahel
Jeahel

Reputation: 1143

TypeScript compilation fails because of duplicate idenfiers between lib.dom.d.ts and react-native

I am trying to write a React component (with TS) as an independent package used by another of my projects. For now, I use Verdaccio installed on a local NAS to host my packages and this part works well.

My problem is when I try compiling my component (quite simple at that), TypeScript gives me hell about problems in typing files.

My component uses only React and Styled-components, as well as another of my packages (which itself uses only React and compiles correctly). In VS Code I have not a single error or warning.

Here are the errors I get when I run tsc:

../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(5196,11): error TS2300: Duplicate identifier 'FormData'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(5206,13): error TS2300: Duplicate identifier 'FormData'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(16513,11): error TS2320: Interface 'Window' cannot simultaneously extend types 'GlobalFetch' and 'WindowOrWorkerGlobalScope'.
  Named property 'fetch' of types 'GlobalFetch' and 'WindowOrWorkerGlobalScope' are not identical.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17406,13): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17510,13): error TS2451: Cannot redeclare block-scoped variable 'console'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17819,6): error TS2300: Duplicate identifier 'RequestInfo'.
../../../../../.npm-global/lib/node_modules/typescript/lib/lib.dom.d.ts(17992,6): error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
node_modules/@types/react-native/globals.d.ts(36,15): error TS2300: Duplicate identifier 'FormData'.
node_modules/@types/react-native/globals.d.ts(81,5): error TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams | ReadableStream<Uint8Array> | null | undefined', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData | null | undefined'.
node_modules/@types/react-native/globals.d.ts(107,14): error TS2300: Duplicate identifier 'RequestInfo'.
node_modules/@types/react-native/globals.d.ts(126,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Response' must be of type '{ new (body?: string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams | ReadableStream<Uint8Array> | null | undefined, init?: ResponseInit | undefined): Response; prototype: Response; error(): Response; redirect(url: string, status?: number | undefined): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData | null | undefined, init?: ResponseInit | undefined): Response; prototype: Response; error: () => Response; redirect: (url: ...'.
node_modules/@types/react-native/globals.d.ts(196,5): error TS2717: Subsequent property declarations must have the same type.  Property 'abort' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(197,5): error TS2717: Subsequent property declarations must have the same type.  Property 'error' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(198,5): error TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(199,5): error TS2717: Subsequent property declarations must have the same type.  Property 'loadend' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(200,5): error TS2717: Subsequent property declarations must have the same type.  Property 'loadstart' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(201,5): error TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(202,5): error TS2717: Subsequent property declarations must have the same type.  Property 'timeout' must be of type 'ProgressEvent', but here has type 'Event'.
node_modules/@types/react-native/globals.d.ts(206,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onabort' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(207,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onerror' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(208,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onload' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(209,5): error TS2717: Subsequent property declarations must have the same type.  Property 'onloadend' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) => any) | null', but here has type '((this: XMLHttpRequest, ev: Event) => any) | null'.
node_modules/@types/react-native/globals.d.ts(210,5): error 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'.
node_modules/@types/react-native/globals.d.ts(211,5): error 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'.
node_modules/@types/react-native/globals.d.ts(212,5): error 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'.
node_modules/@types/react-native/globals.d.ts(243,6): error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
node_modules/@types/react-native/index.d.ts(3838,49): error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
node_modules/@types/react-native/index.d.ts(3859,42): error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
node_modules/@types/react-native/index.d.ts(9318,11): error TS2451: Cannot redeclare block-scoped variable 'console'.
node_modules/@types/react-native/index.d.ts(9326,18): error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
node_modules/@types/react-native/index.d.ts(9329,11): error TS2451: Cannot redeclare block-scoped variable 'navigator'.

Here is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./lib",
    "declaration": true,
    "target": "es5",
    "jsx": "react",
    "strict": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

And my package.json: 

{
  "name": "@hpi_components/card",
  "version": "1.0.4",
  "main": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "publishConfig": {
    "registry": "http://10.0.0.102:32768"
  },
  "dependencies": {
    "@hpi_components/application_theme_context": "^1.0.8",
    "@types/react": "^16.8.3",
    "@types/styled-components": "^4.1.10",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "styled-components": "^4.1.3"
  }
}

I have no idea why I have these problems, mostly why there are mentions to react native...

Thank you for your help!

Upvotes: 4

Views: 7620

Answers (1)

Cosmin Lehene
Cosmin Lehene

Reputation: 837

Check this thread out for an description and possible solution https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015

"This should be a peerDependency" is true for pretty much all packages in DT that have interdependencies 😭

* versions are a hack.

Anyway, you might be able to fix this locally by setting your compilerOptions.types in tsconfig.json. Set it to [], or to ['node'], or only to the list of types that need to be made automatically available without importing.

Upvotes: 2

Related Questions