Cannot read property https of undefined error in firebase functions

Question

I'm following this youtube firebase official tutorial on cloud functions for server-side react rendering.

(I followed the exact directory structure as the video by the way.)

But I'm getting an error whenever I try to serve it:

i  functions: Preparing to emulate functions.
⚠  hosting: Port 5000 is not available. Trying another port...
i  hosting: Serving hosting files from: dev
✔  hosting: Local server: http://localhost:5004

⚠  functions: Failed to load functions source code. Ensure that you have the latest SDK by running npm i --save firebase-functions inside the functions directory.
⚠  functions: Error from emulator. Error occurred while parsing your function triggers.

TypeError: Cannot read property 'https' of undefined
    at Object.<anonymous> (/Users/mac/Documents/React-Projects/React-js/Cards/functions/index.js:35:54)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/mac/.nvm/versions/node/v6.11.5/lib/node_modules/firebase-tools/lib/triggerParser.js:21:11
    at Object.<anonymous> (/Users/mac/.nvm/versions/node/v6.11.5/lib/node_modules/firebase-tools/lib/triggerParser.js:75:3)

I have tried npm i --save firebase-functions as it said but still getting error.

firebase.json:

{
  "hosting": {
    "public": "dev",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites":[{
      "source": "**",
      "function": "main"
    }]
  }
}

index.js in the root of project folder:

import React from 'react';
import { renderToString } from 'react-dom';
import express from 'express';
import Test from './src/components/Test/Test';
import functions from 'firebase-functions';

const app = express();

app.get('**', (req, res) => {
    const html = renderToString(<Test />);
    res.send(html);
});

export let main = functions.https.onRequest(app);

package.json:

{
  "name": "Cards",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack -p --config webpack.prod.config.js",
    "babel": "babel src -d functions/src && babel index.js -d functions"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^1.3.0",
    "@material-ui/icons": "^1.1.0",
    "firebase": "^5.2.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "firebase-admin": "^5.12.1",
    "firebase-functions": "^1.1.0",
    "firebase-tools": "^3.19.1",
    "webpack": "^4.14.0",
    "webpack-dev-server": "^3.1.4"
  }
}

By looking at the error, it is pointing at functions.https.onRequest(app); line in the index.js file.

I have also checked in the functions get started guide and it has functions.https.onRequest(...).

So, where is the problem and how can I solve it?

System details:

macOS: 10.13.4

nvm: 0.33.11

node: 6.11.5

npm: 3.10.10

Arber Sylejmani Arber Sylejmani · Accepted Answer · 2018-06-30T22:22:36

You should do:

import * as functions from 'firebase-functions'

because 'firebase-functions' obviously doesn't seem to have a default export

or you can do:

import { https } from 'firebase-functions'

but remember to add to this impot any other functions that you might use in your code.

Cannot read property https of undefined error in firebase functions

1 Answers