react-native-community / react-native-template-typescript

👾 Clean and minimalist React Native template for a quick start with TypeScript.
https://www.npmjs.com/package/react-native-template-typescript
MIT License
1.86k stars 398 forks source link

Transpiling errors with version 6.6.3 #203

Closed dewijones92 closed 2 years ago

dewijones92 commented 3 years ago

Expected results

For there to be zero transpiling issues

Observed results

What happened? There are transpiling issues

Logs

Please add the log output here.

dewi@pop-os:~/tmp/MyApp3$ npx tsc
node_modules/@types/node/globals.d.ts:317:11 - error TS2300: Duplicate identifier 'AbortController'.

317 interface AbortController {
              ~~~~~~~~~~~~~~~

  node_modules/@types/react-native/globals.d.ts:389:15
    389 declare class AbortController {
                      ~~~~~~~~~~~~~~~
    'AbortController' was also declared here.

node_modules/@types/node/globals.d.ts:329:11 - error TS2300: Duplicate identifier 'AbortSignal'.

329 interface AbortSignal {
              ~~~~~~~~~~~

  node_modules/@types/react-native/globals.d.ts:376:15
    376 declare class AbortSignal {
                      ~~~~~~~~~~~
    'AbortSignal' was also declared here.

node_modules/@types/node/globals.d.ts:336:13 - error TS2300: Duplicate identifier 'AbortController'.

336 declare var AbortController: {
                ~~~~~~~~~~~~~~~

  node_modules/@types/react-native/globals.d.ts:389:15
    389 declare class AbortController {
                      ~~~~~~~~~~~~~~~
    'AbortController' was also declared here.

node_modules/@types/node/globals.d.ts:341:13 - error TS2300: Duplicate identifier 'AbortSignal'.

341 declare var AbortSignal: {
                ~~~~~~~~~~~

  node_modules/@types/react-native/globals.d.ts:376:15
    376 declare class AbortSignal {
                      ~~~~~~~~~~~
    'AbortSignal' was also declared here.

node_modules/@types/react-native/globals.d.ts:376:15 - error TS2300: Duplicate identifier 'AbortSignal'.

376 declare class AbortSignal {
                  ~~~~~~~~~~~

  node_modules/@types/node/globals.d.ts:329:11
    329 interface AbortSignal {
                  ~~~~~~~~~~~
    'AbortSignal' was also declared here.
  node_modules/@types/node/globals.d.ts:341:13
    341 declare var AbortSignal: {
                    ~~~~~~~~~~~
    and here.

node_modules/@types/react-native/globals.d.ts:389:15 - error TS2300: Duplicate identifier 'AbortController'.

389 declare class AbortController {
                  ~~~~~~~~~~~~~~~

  node_modules/@types/node/globals.d.ts:317:11
    317 interface AbortController {
                  ~~~~~~~~~~~~~~~
    'AbortController' was also declared here.
  node_modules/@types/node/globals.d.ts:336:13
    336 declare var AbortController: {
                    ~~~~~~~~~~~~~~~
    and here.

Found 6 errors.

Steps to reproduce

  1. npx react-native init MyApp3 --template react-native-template-typescript
  2. cd MyApp3
  3. npx tsc
varwasabi commented 3 years ago

You can use the below patch with patch-package to ensure there's no duplicate declaration between @types/node and @types/react-native. I've not looked into both of these types so not sure where the intent to add them came from but at least it will give you a work around in the mean time.

// @types+node+15.3.0.patch
diff --git a/node_modules/@types/node/globals.d.ts b/node_modules/@types/node/globals.d.ts
index 4f78edd..31a3bfc 100755
--- a/node_modules/@types/node/globals.d.ts
+++ b/node_modules/@types/node/globals.d.ts
@@ -333,15 +333,15 @@ interface AbortSignal {
     readonly aborted: boolean;
 }

-declare var AbortController: {
-    prototype: AbortController;
-    new(): AbortController;
-};
-
-declare var AbortSignal: {
-    prototype: AbortSignal;
-    new(): AbortSignal;
-};
+// declare var AbortController: {
+//     prototype: AbortController;
+//     new(): AbortController;
+// };
+
+// declare var AbortSignal: {
+//     prototype: AbortSignal;
+//     new(): AbortSignal;
+// };
 //#endregion borrowed

 /*----------------------------------------------*
dewijones92 commented 3 years ago

@varwasabi thanks

emin93 commented 3 years ago

Likely related to: https://github.com/react-native-community/react-native-template-typescript/pull/182

odital commented 3 years ago

This is still happening when initializing with typescript template. Had to use @varwasabi patch.

achmadk commented 3 years ago

Is it possible to set compilerOptions.skipLibCheck inside tsconfig.json file to true instead, because these transpile errors occurred by third-party libraries?

CptFabulouso commented 3 years ago

As workaround I solved it by installing @types/node@14.14.2. Nothing seems to complain

FanchenBao commented 2 years ago

Patch for the latest version

// @types+node+16.11.8.patch
diff --git a/node_modules/@types/node/globals.d.ts b/node_modules/@types/node/globals.d.ts
index ae974db..7ae7530 100755
--- a/node_modules/@types/node/globals.d.ts
+++ b/node_modules/@types/node/globals.d.ts
@@ -44,36 +44,36 @@ declare var gc: undefined | (() => void);
 //#region borrowed
 // from https://github.com/microsoft/TypeScript/blob/38da7c600c83e7b31193a62495239a0fe478cb67/lib/lib.webworker.d.ts#L633 until moved to separate lib
 /** A controller object that allows you to abort one or more DOM requests as and when desired. */
-interface AbortController {
-    /**
-     * Returns the AbortSignal object associated with this object.
-     */
-
-    readonly signal: AbortSignal;
-    /**
-     * Invoking this method will set this object's AbortSignal's aborted flag and signal to any observers that the associated activity is to be aborted.
-     */
-    abort(): void;
-}
-
-/** A signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object. */
-interface AbortSignal {
-    /**
-     * Returns true if this AbortSignal's AbortController has signaled to abort, and false otherwise.
-     */
-    readonly aborted: boolean;
-}
-
-declare var AbortController: {
-    prototype: AbortController;
-    new(): AbortController;
-};
-
-declare var AbortSignal: {
-    prototype: AbortSignal;
-    new(): AbortSignal;
-    // TODO: Add abort() static
-};
+// interface AbortController {
+//     /**
+//      * Returns the AbortSignal object associated with this object.
+//      */
+
+//     readonly signal: AbortSignal;
+//     /**
+//      * Invoking this method will set this object's AbortSignal's aborted flag and signal to any observers that the associated activity is to be aborted.
+//      */
+//     abort(): void;
+// }
+
+// /** A signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object. */
+// interface AbortSignal {
+//     /**
+//      * Returns true if this AbortSignal's AbortController has signaled to abort, and false otherwise.
+//      */
+//     readonly aborted: boolean;
+// }
+
+// declare var AbortController: {
+//     prototype: AbortController;
+//     new(): AbortController;
+// };
+
+// declare var AbortSignal: {
+//     prototype: AbortSignal;
+//     new(): AbortSignal;
+//     // TODO: Add abort() static
+// };
 //#endregion borrowed

 //#region ArrayLike.at()
emin93 commented 2 years ago

Since this issue was open for a while already, we are closing this now with #245. While not the best solution, it solves that initial "broken state".