firebase-functions: Multiple duplicate identifier while tsc

Related issues

https://github.com/firebase/firebase-functions/issues/404

[REQUIRED] Version info

node:

v10.15.3*

firebase-functions:

^3.1.0

firebase-tools:

7.2.4

firebase-admin:

^8.0.0

[REQUIRED] Test case

1. firebase init
2. install all needed dependencies - seen in package.json
3. firebase deploy --only functions

[REQUIRED] Steps to reproduce

Refer to Test case

[REQUIRED] Expected behavior

Upload functions - don´t throw tsc errors

[REQUIRED] Actual behavior

Nikolas-MacBook-Pro: dev$ firebase deploy --debug
[2019-08-27T14:14:01.230Z] ----------------------------------------------------------------------
[2019-08-27T14:14:01.233Z] Command:       /usr/local/bin/node /usr/local/bin/firebase deploy --debug
[2019-08-27T14:14:01.233Z] CLI Version:   7.2.4
[2019-08-27T14:14:01.233Z] Platform:      darwin
[2019-08-27T14:14:01.233Z] Node Version:  v10.15.3
[2019-08-27T14:14:01.238Z] Time:          Tue Aug 27 2019 16:14:01 GMT+0200 (GMT+02:00)
[2019-08-27T14:14:01.238Z] ----------------------------------------------------------------------

[2019-08-27T14:14:01.246Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
[2019-08-27T14:14:01.246Z] > authorizing via signed-in user
[2019-08-27T14:14:01.247Z] [iam] checking project development for permissions ["cloudfunctions.functions.create","cloudfunctions.functions.delete","cloudfunctions.functions.get","cloudfunctions.functions.list","cloudfunctions.functions.update","cloudfunctions.operations.get","datastore.indexes.create","datastore.indexes.delete","datastore.indexes.list","datastore.indexes.update","firebase.projects.get","firebasedatabase.instances.update","firebaserules.releases.create","firebaserules.releases.update","firebaserules.rulesets.create"]
[2019-08-27T14:14:01.257Z] >>> HTTP REQUEST POST https://cloudresourcemanager.googleapis.com/v1/projects/shakle-development:testIamPermissions  
 permissions=[cloudfunctions.functions.create, cloudfunctions.functions.delete, cloudfunctions.functions.get, cloudfunctions.functions.list, cloudfunctions.functions.update, cloudfunctions.operations.get, datastore.indexes.create, datastore.indexes.delete, datastore.indexes.list, datastore.indexes.update, firebase.projects.get, firebasedatabase.instances.update, firebaserules.releases.create, firebaserules.releases.update, firebaserules.rulesets.create]
[2019-08-27T14:14:02.433Z] <<< HTTP RESPONSE 200 content-type=application/json; charset=UTF-8, vary=X-Origin, Referer, Origin,Accept-Encoding, date=Tue, 27 Aug 2019 14:14:02 GMT, server=ESF, cache-control=private, x-xss-protection=0, x-frame-options=SAMEORIGIN, x-content-type-options=nosniff, server-timing=gfet4t7; dur=814, alt-svc=quic=":443"; ma=2592000; v="46,43,39", accept-ranges=none, transfer-encoding=chunked
[2019-08-27T14:14:02.436Z] >>> HTTP REQUEST GET https://firebase.googleapis.com/v1beta1/projects/development  
 
[2019-08-27T14:14:02.963Z] <<< HTTP RESPONSE 200 content-type=application/json; charset=UTF-8, vary=X-Origin, Referer, Origin,Accept-Encoding, date=Tue, 27 Aug 2019 14:14:02 GMT, server=ESF, cache-control=private, x-xss-protection=0, x-frame-options=SAMEORIGIN, x-content-type-options=nosniff, alt-svc=quic=":443"; ma=2592000; v="46,43,39", accept-ranges=none, transfer-encoding=chunked

=== Deploying to 'development'...

i  deploying database, storage, firestore, functions
Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build /Users/dev/Desktop/GITHUB/functions
> tsc

node_modules/typescript/lib/lib.dom.d.ts:5353:11 - error TS2300: Duplicate identifier 'FormData'.

5353 interface FormData {
               ~~~~~~~~

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

node_modules/typescript/lib/lib.dom.d.ts:5363:13 - error TS2300: Duplicate identifier 'FormData'.

5363 declare var FormData: {
                 ~~~~~~~~

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

node_modules/typescript/lib/lib.dom.d.ts:15671:11 - error TS2300: Duplicate identifier 'URLSearchParams'.

15671 interface URLSearchParams {
                ~~~~~~~~~~~~~~~

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

node_modules/typescript/lib/lib.dom.d.ts:15700:13 - error TS2300: Duplicate identifier 'URLSearchParams'.

15700 declare var URLSearchParams: {
                  ~~~~~~~~~~~~~~~

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

node_modules/typescript/lib/lib.dom.d.ts:18125:13 - error TS2300: Duplicate identifier 'URLSearchParams'.

18125 declare var URLSearchParams: typeof URLSearchParams;
                  ~~~~~~~~~~~~~~~

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

node_modules/typescript/lib/lib.dom.d.ts:18152:13 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

18152 declare var navigator: Navigator;
                  ~~~~~~~~~

  ../node_modules/@types/react-native/index.d.ts:9504:11
    9504     const navigator: Navigator;
                   ~~~~~~~~~
    'navigator' was also declared here.

node_modules/typescript/lib/lib.dom.d.ts:18568:6 - error TS2300: Duplicate identifier 'RequestInfo'.

18568 type RequestInfo = Request | string;
           ~~~~~~~~~~~

  ../node_modules/@types/react-native/globals.d.ts:111:14
    111 declare type RequestInfo = Request | string;
                     ~~~~~~~~~~~
    'RequestInfo' was also declared here.

node_modules/typescript/lib/lib.dom.d.ts:18746:6 - error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

18746 type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
           ~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../node_modules/@types/react-native/globals.d.ts:253:14
    253 declare type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    'XMLHttpRequestResponseType' was also declared here.

node_modules/typescript/lib/lib.dom.iterable.d.ts:67:11 - error TS2300: Duplicate identifier 'FormData'.

67 interface FormData {
             ~~~~~~~~

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

node_modules/typescript/lib/lib.dom.iterable.d.ts:229:11 - error TS2300: Duplicate identifier 'URLSearchParams'.

229 interface URLSearchParams {
              ~~~~~~~~~~~~~~~

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

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

40 declare class FormData {
                 ~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5353:11
    5353 interface FormData {
                   ~~~~~~~~
    'FormData' was also declared here.
  node_modules/typescript/lib/lib.dom.d.ts:5363:13
    5363 declare var FormData: {
                     ~~~~~~~~
    and here.
  node_modules/typescript/lib/lib.dom.iterable.d.ts:67:11
    67 interface FormData {
                 ~~~~~~~~
    and here.

../node_modules/@types/react-native/globals.d.ts:85: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'.

85     body?: BodyInit_;
       ~~~~

  node_modules/typescript/lib/lib.dom.d.ts:1413:5
    1413     body?: BodyInit | null;
             ~~~~
    'body' was also declared here.

../node_modules/@types/react-native/globals.d.ts:111:14 - error TS2300: Duplicate identifier 'RequestInfo'.

111 declare type RequestInfo = Request | string;
                 ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:18568:6
    18568 type RequestInfo = Request | string;
               ~~~~~~~~~~~
    'RequestInfo' was also declared here.

../node_modules/@types/react-native/globals.d.ts:130: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: ...'.

130 declare var Response: {
                ~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:12463:13
    12463 declare var Response: {
                      ~~~~~~~~
    'Response' was also declared here.

../node_modules/@types/react-native/globals.d.ts:253:14 - error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

253 declare type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:18746:6
    18746 type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
               ~~~~~~~~~~~~~~~~~~~~~~~~~~
    'XMLHttpRequestResponseType' was also declared here.

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

258 declare class URLSearchParams {
                  ~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:15671:11
    15671 interface URLSearchParams {
                    ~~~~~~~~~~~~~~~
    'URLSearchParams' was also declared here.
  node_modules/typescript/lib/lib.dom.d.ts:15700:13
    15700 declare var URLSearchParams: {
                      ~~~~~~~~~~~~~~~
    and here.
  node_modules/typescript/lib/lib.dom.d.ts:18125:13
    18125 declare var URLSearchParams: typeof URLSearchParams;
                      ~~~~~~~~~~~~~~~
    and here.
  node_modules/typescript/lib/lib.dom.iterable.d.ts:229:11
    229 interface URLSearchParams {
                  ~~~~~~~~~~~~~~~
    and here.

../node_modules/@types/react-native/index.d.ts:9501:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

9501         readonly geolocation: Geolocation;
                      ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:10581:14
    10581     readonly geolocation: Geolocation;
                       ~~~~~~~~~~~
    'geolocation' was also declared here.

../node_modules/@types/react-native/index.d.ts:9504:11 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

9504     const navigator: Navigator;
               ~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:18152:13
    18152 declare var navigator: Navigator;
                      ~~~~~~~~~
    'navigator' was also declared here.


Found 18 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ build: `tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the functions@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2019-08-27T14_14_10_156Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code2
Nikolas-MacBook-Pro:BLOGGERZON dev$ 

Were you able to successfully deploy your functions?

No. I tried everything that was suggested in the referenced issue. Working on a monorepo with nextjs. The only thing that saves my day is "skipLibCheck": true for functions/tsconfig - but this comes with some real downsides. Also tried to delete package.json.lock and node_modules and reinstall.

Project structure

+ pages
+ src
- functions
     |--- tsconfig.json
     |--- package.json
tsconfig.json
package.json

package.json @root

{
  "main": "index.jsx",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "firebase": "^6.4.0",
    "next": "^9.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
  },
  "devDependencies": {
    "typescript": "^3.5.3"
  }
}

tsconfig.json @root

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true, // strangely nextjs refers to set to true
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules", "functions" // tried also not excluding functions
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

/functions/tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true // with set to true it works - but this is not acceptable
  },
  "compileOnSave": true,
  "lib": ["esnext.asynciterable"]
}

/functions/package.json

{
  "name": "functions",
  "scripts": {
    "lint": " node ../node_modules/.bin/eslint --fix ./src/*.ts",
    "build": "tsc", // tried also with npx tsc
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "8"
  },
  "main": "lib/src/index.js",
  "dependencies": {
    "faker": "^4.1.0",
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "stripe": "^7.8.0"
  },
  "devDependencies": {
    "@types/faker": "^4.1.5",
    "@types/node": "^12.7.2",
    "@types/stripe": "^6.31.20",
    "typescript": "^3.5.3"
  },
  "private": true
}

I am assuming that this error comes from running a typescript monorepo, where the frontend is using a tsconfig and the functions also require it. So it happens that by running firebase deploy --only functions from the root dir of the whole project tsc refers to node_modules of the root and loads already the react types. Clearly visible if you take a look at the paths from the error messages.