Error in deploy

[robsonkades]

This example with erro in deploy

yarn build ✔ yarn serve ✔

i deploying functions, hosting i functions: ensuring necessary APIs are enabled... ✔ functions: all necessary APIs are enabled i functions: preparing . directory for uploading...

Error: Error occurred while parsing your function triggers.

Error: > Couldn't find a pages directory. Please create one under the project root at findPagesDir (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/lib/find-pages-dir.js:3:170) at new DevServer (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/server/next-dev-server.js:1:2962) at createServer (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/server/next.js:2:105) at Object. (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/dist/server/index.js:22:31) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17)

[jthegedus]

Hi @robsonkades firebase serve is problematic. I wouldn't recommend using it. See my recommendations on the next.js repo example. I intend to update this example using the new emulator within the next 48 hours.

Thanks for taking the time to report this here 💯

[rscotten]

@robsonkades I changed

"deploy": "yarn firebase deploy --only functions,hosting"

to

"deploy": "NODE_ENV=production yarn firebase deploy --only functions,hosting"

and it worked

[axel-blade]

Alternative to @rscotten's comment with NPM.

"scripts": {
    "setup": "firebase use --add",
    "build:client": "next build src/client",
    "build:server": "babel src/server --out-dir dist/server --source-maps",
    "build": "npm run build:client && npm run build:server",
    "watch:client": "next src/client",
    "watch:server": "babel src/server --out-dir dist/server --source-maps --watch",
    "watch": "npm run watch:client & npm run watch:server",
    "serve": "cross-env NODE_ENV=production firebase serve --only functions,hosting",
    "predeploy": "rimraf dist/ && npm run build",
    "deploy": "cross-env NODE_ENV=production firebase deploy --only functions,hosting"
  }

[jthegedus]

Hi all, sorry for the delay. I will get to looking at this issue this coming weekend

[joshleong]

I was able to deploy this to Firebase using @axel-blade change to package.json scripts, but I am getting an "Error: Forbidden Your client does not have permission to get URL /nextjs-server/ from this server." when I try to access the site after deploying. Works in my local environment.

[joshleong]

Oh I actually had to go into Google Cloud Platform Dashboard, sign up, add billing and then add an allUser member with Cloud Function Invoking Privileges!

[jthegedus]

Google recently updated Cloud Functions to be private by default, so you are required to configure the IAM permissions on a per function level to allow access. I am planning an entire rewrite of my next.js guide in the coming weeks to address all these issues and more. Thanks for sharing your results here.

[joshleong]

I've recently tried to use SWR from next.js, but i'm finding that in this project I'm getting a hook error because there are two versions of react that are running, I was wondering if you had any tips on getting that to resolve in this project?

[jthegedus]

two versions of react that are running

Where's the second version coming from?

[joshleong]

I'm getting this error using SWR, I'm pretty sure I'm using the hook correctly, not sure if it's the other errors.

"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

import { request } from 'graphql-request'
import useSWR from 'swr'

const API = 'https://api.graph.cool/simple/v1/movies'
const fetcher = query => request(API, query)

function App () {
  const { data, error } = useSWR(
    `{
      Movie(title: "Inception") {
        title
        releaseDate
        actors {
          name
        }
      }
    }`,
    fetcher
  )

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return (
  <div>
    <h1>{data.Movie.title}</h1>
    {data.Movie.actors.map(actor => (
            <p key={actor.name}>{actor.name}</p>
        )
    )}
  </div>
  )

}

export default App

[jthegedus]

I'd start with 1. and rm -rf node_modules package-lock.json yarn.lock and then npm i react@latest react-dom@latest next@latest. I successfully used SWR hook yesterday without problem.

[joshleong]

This might be because I don't understand the build process very well, I have most of my code in src/client with the next config

module.exports = {
  distDir: "../../dist/client"
};

Which I think outputs my next app into the main folder that I'm uploading to firebase hosting and functions.

I went ahead an rm -rf everything in both my src/client which is where I use npm run dev to run things locally, as well as rm -rf my node_modules in the main folder, and reinstalled everything as you mentioned.

I still ran into the React Hook Error.

I'm wondering if some of this is because I'm using a mix of Yarn and NPM, but things seem to work when I run yarn deploy in my main directory to deploy to Firebase if i'm not trying to do anything with SWR.

When I run "npm ls react" as was recommended in the React documentation, I only see one updated version of react in either the Main or src/client folder.

[jthegedus]

Is this repo public and could you share it? Would make debugging easier.

I've just gone back to using npm as everyone has it whereas that is not the case for yarn unfortunately.

I've got a completely reworked version of this which I will release this weekend. It simplifies the setup much more and leverages the latest Next.js features. Stay tuned.

[joshleong]

I'll try to clean this up a bit and upload it, but looking forward to the reworked version, got excited about using graphQL on Firebase Functions as well.

[joshleong]

I got it to work with more banging my head against the package.json, I think it was a mistake to run npm run dev within the src/client folder to get a local version of it up and running. I migrated the package.json over to using npm and installed cross-env as well as install-peers to get past some of the errors I was seeing on build.

[jthegedus]

Hi all, please see my new example which addressed many of the issues people had with the setup. I believe the structure will cause less confusion.

https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs

I intend to update this example using the new emulator within the next 48 hours

Lol, sorry about that.

I have the new emulator in this example, though the Next.js development server doesn't run well on the local Cloud Function. I don't think you will need to run the local emulator though as the next dev server does most of what you need. The Cloud Function server is just a bridge between the two envs, not a fully working development setup.

Given the drastically new example I will close this. If you find issues with the new setup please do raise new issues! Thanks

[bmwertman]

Google recently updated Cloud Functions to be private by default, so you are required to configure the IAM permissions on a per function level to allow access. I am planning an entire rewrite of my next.js guide in the coming weeks to address all these issues and more. Thanks for sharing your results here.

I'm also running up against the "Error : Forbidden" issue. The first time I deployed and hit the deployment url it opened a login screen having me login with one of my Google accounts. Now it gives the "Error" Forbidden" every time without asking me to login.

When I go to GCP to add allUsers I see my other Cloud functions there but nothing specific to the nextjs-server function. Shouldn't that be there after deployment also?

[jthegedus]

@bmwertman Firebase have updated firebase-tools so it will create publicly accessible Cloud Functions. It will apply the correct IAM permissions behind the scenes. Please try updating firebase-tools to the latest version.

[bmwertman]

@jthegedus I updated to firebase-tools 8.4.3 but I still get the "Error: Forbidden" at the url after the deploy finishes.

[jthegedus]

@bmwertman are you able to delete the resources for that deployment? Perhaps try deploying just a single function? Or, rerun firebase init.

[bmwertman]

@jthegedus I have functions deployed from a functions directory in the React Native project that goes with the site I'm trying to deploy. Are you suggesting I rerun firebase init for firebase functions or firebase hosting?

[jthegedus]

Yes. Backup your existing firebaserc and firebase.json, perform a firebase init, copy paste your config file contents back into the new files and see if that works for deploying a single Cloud Function that is causing you error firebase deploy --only functions:yourfunctionname.

[bmwertman]

Same result. The other thing I don't understand is that if I copy paste https://my-app.web.app from my terminal to the browser after deploy finishes it redirects to us-central1-my-app.cloudfunctions.net/nextjs-server That's where I actually get the "Error: Forbidden" message.

[jthegedus]

Are you able to share the repo? Or at least your firebase.json file? That URL should not "redirect" you anywhere. The only reason I can see for the Error: Forbidden message is if your Function has been deployed with a pre 8.x.x firebase-tools. Perhaps run a firebase functions:delete nextjs-server, firebase logout, firebase login and then do a firebase deploy?

[bmwertman]

unfortunately I can not share the repo. I tried firebase functions:delete nextjs-server and it returned Error: The specified filters do not match any existing functions in project my-app.

Here is the firebase.json;

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**/**",
        "function": "nextjs-server"
      }
    ]
  },
  "functions": {
    "source": ".",
    "ignore": [
      ".firebase/**",
      ".firebaserc",
      "firebase.json",
      "**/node_modules/**",
      "**/public/**"
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

[bmwertman]

My firebase console web view does show that the deploys are happening though under the hosting tab.

[jthegedus]

What is the name of your Cloud Function? Firebase Hosting might be working, but if the Function isn't deployed it won't work. Is the Cloud Function not deploying?

[bmwertman]

I've worked with Firebase for quite a while now but next.js and SSR is all pretty new to me. In contrast to my RN project where I have a functions directory I don't have that in my next.js project so the only "name" for a cloud function I have is the nextjs-server coming from my firebase.json under rewrites. But I never see nextjs-server show up in my firebase project under functions nor in Google Cloud Platform.

[bmwertman]

This is the firebase.json from my RN project hitting the same Firebase backend. Is it some mismatch between these two causing my issue?

{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

[jthegedus]

Ah okay, well how the SSR works is via a Cloud Function with the Next.js server started within it to perform the server-side rendering of the React code. The rewrite directs calls to the website to be served via the function. And because the Next.js app is needed by the Cloud Function the frontend code needs to be packaged together with it.

I would suggest reading the README of the functions-nextjs example as a starting point.