Next.js: with-firebase-hosting example serve not working

[afuggini]

Serving with-firebase-hosting example not working

Example name

Serving with-firebase-hosting example not working

Describe the bug

Running npm run dev works, but when running npm run serve I am getting:

⚠  functions: Cannot start emulator. Error: Cannot find module '@google-cloud/functions-emulator/src/config'
(node:3376) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'exit' of undefined
    at /Users/ariel/git/with-firebase-hosting-app/node_modules/firebase-tools/lib/command.js:82:34
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:229:7)
(node:3376) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3376) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
i  hosting: Serving hosting files from: dist/public
✔  hosting: Local server: http://localhost:5000

Browsing localhost:5000 shows:
An internal error occurred while connecting to Cloud Function "next"

To Reproduce

1. npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
2. cd with-firebase-hosting-app
3. Add proper Firebase project to .firebaserc file
4. npm run serve

Expected behavior

Example to serve.

Screenshots

System information

• OS: macOS 10.12.6
• Browser (if applies) Chrome
• Version of Next.js: 7.0.2

[oBusk]

What is the version of your node? 🙂

What it makes me think of is that unfortunately, firebase-tools has @google-cloud/functions-emulator as an optional dependency and it is skipped when using Node with a different version than 6.x.x (the only version that @google-cloud/functions-emulator officially supports). The solution to that issue is to ensure that it is installed by running npm i -g @google @google-cloud/functions-emulator. Then trying to run the emulation again! 👍

[afuggini]

Thanks @oBusk. Unfortunately, running npm i -g @google @google-cloud/functions-emulator showed an error:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@google": Tags may not have any characters that encodeURIComponent encodes.

And removing the @google part installed functions-emulator but didn't solve the issue. :(

[oBusk]

Thanks @oBusk. Unfortunately, running npm i -g @google @google-cloud/functions-emulator showed an error:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@google": Tags may not have any characters that encodeURIComponent encodes.

And removing the @google part installed functions-emulator but didn't solve the issue. :(

Yea oops i had a typo there with @google twice.

I can't really reproduce this issue. What version of Node and NPM do you have? And did you get the exact same issue as the one you pictured, after installing funtions-emulator globally?

[ibrhm-mnf]

same issue here..any solution

[moflo]

Hi, this may be a Next configuration issue. I needed to change the following line in the ./src/index.js function file to get the default with-firebase-hosting example to work with the Firebase npm run serve command:

var app = next({ dev, conf: { distDir: '../../dist/functions/next' } })

Previous versions of the with-firebase-hosting example set this distDir variable in the ./src/app/next.config.js file, but this doesn't work for the current version.

[afuggini]

@oBusk node v8.12.0, npm 6.4.1. And yes, emulator is installed globally.

[afuggini]

@moflo There is no ./src/index.js. Did you mean ./src/functions/index.js? I updated that one but same error. Were you able to make it run? What node version are you running?

[afuggini]

Ok here's how I got this running:

• Uninstalled npm, nvm, node and yarn from my mac.
• Installed node 8.12.0 via nvm.
• Installed functions emulator and firebase tools globally (using only npm from now on, no yarn)
• Updated this example's ./src/functions/index.js to look like this (cause it was not finding the build directory):

const path = require('path')
const functions = require('firebase-functions')
const next = require('next')

var dev = process.env.NODE_ENV !== 'production'
var app = next({ dev, conf: { distDir: `${path.relative(process.cwd(), __dirname)}/next` } })
var handle = app.getRequestHandler()

exports.next = functions.https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl) // log the page.js file that is being requested
  return app.prepare().then(() => handle(req, res))
})

Thanks to https://github.com/zeit/next.js/issues/5912 I found the solution for the build problem.