Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Cannot find name 'ServiceWorkerRegistration'" error when creating a firebase cloud function using Typescript

I'm receiving the following error (photo below) when I deploy my cloud function with the module firebase installed. Error when trying to deploy my cloud functions

I've tried installing @types/firebase and firebase and receive the same error. I'm pretty sure this error has something to do with this module because when both firebase and @types/firebase are uninstalled, the function deploys properly.

Also, the cloud functions are not calling this module yet so I don't think the error is in the function. I've provided the code for my package.json file and ts.config file. Any idea why I'm getting this error and how I can import modules without getting this error? Let me know if there's another file worth reviewing. Thank you.

./package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "./node_modules/.bin/tslint -p tslint.json",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log",
    "build": "./node_modules/.bin/tsc"
  },
  "dependencies": {
    "dom": "0.0.3",
    "expo-server-sdk": "^2.4.0",
    "firebase-admin": "~5.12.1",
    "firebase-functions": "^1.0.3",
    "typescript": "^2.9.2"
  },
  "devDependencies": {
    "eslint": "^4.12.0",
    "eslint-plugin-promise": "^3.6.0",
    "ts-loader": "^4.4.2"
  },
  "main": "lib/index.js",
  "private": true
}

./tsconfig.json

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "noImplicitReturns": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es6",
    "allowJs": true,
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}
like image 579
Deep Avatar asked Jun 28 '18 02:06

Deep


2 Answers

If like me you actually need to use the client firebase module inside a cloud function, the problem, along with a work-around, is described in #880:

A workaround is to add "dom" to the "lib" compiler option in your tsconfig.json

Our packages assume that DOM types exist. The problem is that importing firebase/app imports typings of all packages.

Some of our packages (like Messaging) only work in the browser. These packages (or their types) should not be imported in a Node environment.

Edit: here is a safer answer that was posted in the issue thread

The suggested/promoted workaround here of adding "dom" to compilerOptions.lib is NOT safe. That would be telling the compiler that any and all dom type references are valid in my code, which is clearly not the case since Node.js is not a browser environment. If this library is meant to be used as a Node.js TypeScript library, then it should not depend on ambient dom-specific type definitions. A safer workaround for TypeScript 3.0 users is to import firebase as follows:

/// <reference lib="dom" />
import * as firebase from 'firebase';

That first line is a "triple-slash lib directive" (https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) first available in TypeScript 3.0. It's like adding dom to compilerOptions.lib but only for that one file. Note that the triple-slash directive must appear before any statements or it gets interpreted as just a normal comment.

like image 91
weevilgenius Avatar answered Sep 20 '22 16:09

weevilgenius


I've run into this problem several times in the past. You can try adding the following to your tsconfig.json:

tsconfig.json:

  "files": [
    "node_modules/typescript/lib/lib.es6.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]

So your complete tsconfig.json should look as follows:

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "noImplicitReturns": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es6"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ],
  "files": [
    "node_modules/typescript/lib/lib.es6.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
like image 39
Christian Wheeler Avatar answered Sep 19 '22 16:09

Christian Wheeler