Firebase example: couldn't find a pages directory

[matchatype]

Bug report

My project has a custom structure but so far it worked pretty well. Since I updated to v9.0.7 I get this error:

Error: > Couldn't find a pagesdirectory. Please create one under the project root at Object.findPagesDir [...]

So far running next src/app worked just fine. Is there anything different I should do now?

Screenshot

System information

• OS: [macOS]
• Version of Next.js: [9.0.7]

[ijjk]

Hi, I'm not able to reproduce this with a minimal repro of the above structure. Can you provide more detailed steps to reproduce? Is the current working directory you're running Next.js from the project root?

[matchatype]

@ijjk the project structure is very similar to the with-firebase-hosting example. Yes, I'm running npm run serve from the project root.

[matchatype]

Quick note: I can run next as next src/app too, or npm run dev according to my scripts in the screenshot on default port 3000, it is the built project that will crash: npm run serve, which runs fine till v9.0.6.

[edit]
Sorry, it will take you to setup a firebase project, but the example repo will reproduce the issue.

[wouterds]

Can confirm it's an issue in 9.0.7 when using src/pages for production builds.

[yestoall]

same problem for me trying to deploy to firebase
with nextjs 9.0.2 seems to work

[merrywhether]

I'm seeing this too, arising from a docker config that starts the app from a few directories above the app directory (for which I've previously set the dir option on the next() constructor), while also having deleted the source pages directory before building my final docker stage.

As a workaround, it appears that I can literally mkdir pages in my app directory and everything works without having to make any other changes. Seems like it's a really shallow check and then things proceed with the actual built files as before.

[wouterds]

Working again in v9.0.8-canary.0, thanks for fixing so quickly guys!

[cinnabarhorse]

I am using 9.0.6 and can confirm this error as well. It was working before and then suddenly just broke itself. Cost me 2 days of debugging. Thank god someone finally reported this on Github... Tried updating to 9.0.8-canary.0 and still got the error. Rolling back to 9.0.4 for now.

[wouterds]

I am using 9.0.6 and can confirm this error as well. It was working before and then suddenly just broke itself. Cost me 2 days of debugging. Thank god someone finally reported this on Github... Tried updating to 9.0.8-canary.0 and still got the error. Rolling back to 9.0.4 for now.

How do you start your next app? Do you use a src folder? Before 9.0.7 if you wanted to use a src folder you had to use a workaround and start your Next application like this `next src`. Since 9.0.7 they added official support and you can get rid of the last argument and start your app like this `next`.

[cinnabarhorse]

I'm using NextJS with firebase functions, so when I deploy I use next build src/client

[notthatnathan]

Same here, with latest canary (9.0.8-canary.4). I'm closely following the with-firebase-hosting example. I was able to deploy before I updated from v7 to 9.

FWIW, I'm able to skip the 'pages' directory error by adding cross-env NODE_ENV=production to the beginning of the deploy script: https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/package.json#L13.

But then I run into a "Could not find a valid build in the '[project root]/.next' directory!" error, which is weird since my distDir is [project root]/dist/functions/next.

And finally, npm run serve works if I change the dist dir to dist/functions/.next instead of dist/functions/next, otherwise I get a similar error: "Could not find a valid build in the '[project root]/dist/functions/.next' directory!" It seems across the board my dist dir name is being ignored in favor of the default .next.

[qlerebours]

@notthatnathan I tried what seems to work for you but it's not working for me.
Using cross-env NODE_ENV=production removed the error about pages not found, but I still have the error concerning the invalid production build.
The error is Error: Could not find a valid build in the '/home/myhome/projectRootDirectory/next' directory! Try building your app with 'next build' before starting the server.
When the next folder is in /home/myhome/projectRootDirectory/src/functions/next
The next project and config is in /home/myhome/projectRootDirectory/src/app/next.config.js
I tried many things like:

• /home/myhome/projectRootDirectory/src/function/next
• ../functions/next
• ../functions/.next

Nothing works :-/

[Ferezoz]

@xaphod Maybe you are missing to set your node environment to production like this:

NODE_ENV=production firebase emulators:start --inspect-functions --only functions,hosting

or by directly setting it in next configuration in app/index.js like this:

next({ dev: false })

[huan231]

const app = next({
    dev,
    dir: path.join( __dirname, '../app'),
});

works fine for me

[ryudice]

Is this getting fixed someday? I'm having the same issue, seems it's been a while.

[scottie-schneider]

@ryudice what worked for me:

1. Downloaded the latest example of the with-firebase-hosting
2. Changed the node engine to 10
   "engines": { "node": "10" },
3. Installed next@latest
   "next": "^9.3.4",

[scottie-schneider]

Additionally, it seems that cloud functions meant to be publicly accessed (like the all important functions/index.js) need to be specifically assigned permissions moving forward.

Once I had this working, without setting the access level for allUsers, I got an 'your app is not authorized to view this resource' error when going to my hosting URL. Hope that helps someone coming next (or me, when I forget I solved this and come back to this thread in 2 months).

Reference: https://forum.serverless.com/t/setting-iam-policies-for-google-http-functions-since-all-new-gcloud-http-functions-after-nov-1-2019-will-default-private/8686

[honi]

Do you people actually have acceptable performance using a Firebase Function (in reallity just a Google Cloud Function behind the scenes)?

I ended up switching to a e2-micro instance on Google Cloud (just a vm) with the next.js app running 24/7. For my use case this is acceptable money wise, and I don't need the theoretical infinite scalability of a cloud function to be honest.

After all the config fighting and testing, I just feel it's not there yet. In theory it seemed like a good idea and a nice one as well (firebase deploy and there you go). This is my own experience with my current projects, so take this with a grain of salt. 🤷‍♂

[rosgoo]

@scottie-schneider I'm having the same issue but using node 10 and latest next version did not fix it for me :( are you using the latest typescript or regular example?
Also are you just testing by running npm run serve or are you using preserve first ?
Thank you!

[scottie-schneider]

@ryan-0 sorry for late response here. Have you tried adjusting the cloud functions permissions level (my next post after the one you tried)?

[rosgoo]

Thanks for your replay @scottie-schneider! I figured it out in the end, it was an issue with the distDirin my webpack config... Now onto figuring out why hooks only sometimes work when I try npm run serve. Thanks for your help!

[vzla0094]

Additionally, it seems that cloud functions meant to be publicly accessed (like the all important functions/index.js) need to be specifically assigned permissions moving forward.

Once I had this working, without setting the access level for allUsers, I got an 'your app is not authorized to view this resource' error when going to my hosting URL. Hope that helps someone coming next (or me, when I forget I solved this and come back to this thread in 2 months).

Reference: https://forum.serverless.com/t/setting-iam-policies-for-google-http-functions-since-all-new-gcloud-http-functions-after-nov-1-2019-will-default-private/8686

@scottie-schneider
Thank you very much for sharing this! you're a life saver. I couldn't figure out why I was getting the error Your client does not have permission to get URL /next/ from this server. and after googling for a long time I stumbled upon your solution, it saved me a lot of time reading documentation

[mattgabor]

This is still happening for me, and the only way I've been able to fix it is by setting NODE_ENV=production which is not ideal since I would like to reserve NODE_ENV for things like environment scripts. Is the directory named functions enforced by firebase? This is my current setup

const dev = process.env.NODE_ENV !== 'production';
const app = next({
  dev,
  // the absolute directory from the package.json file that initialises this module
  // i.e.: the absolute path from the root of the Cloud Function
  conf: { distDir: 'dist/client' },
});

[Ferezoz]

@mattgabor then just set the flag directly as:

next({ dev: false })

And delete:

const dev = process.env.NODE_ENV !== 'production';

That way you could still use NODE_ENV.

[mattgabor]

I see, thanks @Ferezoz. I thought always disabling dev mode would prevent hot reloading or source maps when running next dev but it seems not to. What does dev mode actually do then? The docs just say dev (bool) whether to launch Next.js in dev mode - default false

[SaschaHeyer]

What is the recommended solution for this issue?

[yestoall]

there is not solution for me

On Tue, 7 Jul 2020 at 11:56, Sascha Heyer ***@***.***> wrote: What is the recommended solution for this issue? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8893 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAHIVCY4FHVOD6SF3XBCZLR2LWMBANCNFSM4I3OKXTQ> .

-- <nacho/>

[rosborn92]

Likely not the issue for most above, but I got the same error message when I changed my dev script from
"dev": "next dev"
to
"dev": "node server/index.js"
after setting up an Express server. Just a reference and reminder for those who run into the error :')

[moonthug]

Setting NODE_ENV to development seems to generate this error. Setting it toproduction fixes it for us

[RiczCalixto]

This is still happening for me. Currently using version 10.0.3.

-- src
  --app
    --pages

Error: Couldn't find a "pages" directory. Please create one under the project root next

If I remove /app and use the following folder structure, it works:

--src
 --pages

[maerzhase]

So the issue is actually pretty clear to me.
When you run the cloudFunction with "development mode" the app rebuilds on each request. So what is happening here is:

• You open http://localhost:5000
• Cloudfunction receives request:

[hosting] Rewriting / to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc

• When this build is through you get the response from the cloudfunction
• After that the browser wants to request all the other chunks, which also go through the cloudFunction:

[hosting] Rewriting /_next/static/chunks/webpack.js?ts=1612863139102 to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc
[hosting] Rewriting /_next/static/chunks/pages/_app.js?ts=1612863139102 to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc
[hosting] Rewriting /_next/static/chunks/react-refresh.js?ts=1612863139102 to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc
[hosting] Rewriting /_next/static/development/_buildManifest.js?ts=1612863139102 to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc
[hosting] Rewriting /_next/static/development/_ssgManifest.js?ts=1612863139102 to http://localhost:5001/<project-id>/us-central1/nextjsFunc for local Function nextjsFunc

And here is were we see the error. Each request rebuilds the app. Therefore it deletes the contents of .next folder and when one function tries to respond with its content the .next folder already have been cleared before the function can respond.

That is why you don't have see the issue when running in production—because the build persists

I am not sure how to fix this though and TBH I am not even sure if serving via emulator is meant for development mode?!

EDIT

I read through the "hidden comments" in this issue and from what I understand cloudfunction emulation is not for nextjs development mode therefore we all should set dev: false in the cloudfunction and IMO this issue can be closed

[jthegedus]

As @maerzhase says, running the app in dev mode on the Firebase Emulator Functions will cause a rebuild each time your app changes which invalidates the build dir which the Function loads next from in "server" mode.

You do not need to run your app on the Functions in the emulator to be able to use the emulator with your app. When you initialise Firebase inside your Next app, you can use this method defined in the local emulator docs to connect your simple next dev running app to the emulator:

https://firebase.google.com/docs/emulator-suite/connect_and_prototype#web_1

var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

The Firebase SDK supports this method of emulator connection for each of the services it hosts, Auth, Fucntions, Firestore etc.

I recommend reading these docs - https://firebase.google.com/docs/emulator-suite/

I would however recommend running the app in the Cloud Function with the prod output (dev:false as @maerzhase suggests) when running your e2e tests or as a manual smoke test.

[leerob]

#21971

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.