reactjs - TypeScript-kompilering misslyckas på grund av duplicerade identifierare mellan lib.dom.d.ts och react-native

Jag försöker skriva en React-komponent (med TS) som ett oberoende paket som används av ett annat av mina projekt. För tillfället använder jag Verdaccio installerat på en lokal NAS för att hosta mina paket och den delen fungerar bra.

Mitt problem är att när jag försöker kompilera min komponent (ganska enkel dessutom), ger TypeScript mig helvete på grund av problem i typningsfilerna.

Min komponent använder bara React och Styled-components, samt ett annat av mina paket (som i sig endast använder React och kompilerar korrekt). I VS Code har jag inte ett enda fel eller varning.

Här är de fel jag får när jag kör 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'.

Här är min tsconfig.json:

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

Och min 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"
  }
}

Jag har ingen aning om varför jag har dessa problem, mest varför det nämns react native...

Tack för din hjälp!

Svar #1

Kolla in den här tråden för en beskrivning och möjlig lösning https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015

„Detta borde vara en peerDependency“ är sant för nästan alla paket i DT som har beroenden mellan varandra 😭

* versioner är en hack.

Hur som helst, du kanske kan fixa detta lokalt genom att ställa in din compilerOptions.types i tsconfig.json. Ställ in den på [], eller på ['node'], eller endast på listan över typer som behöver göras automatiskt tillgängliga utan import.

Relaterade artiklar