Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firebase example: couldn't find a pages directory #8893

Closed
matchatype opened this issue Sep 28, 2019 · 58 comments · Fixed by #8896 or yukin01/portfolio#64
Closed

Firebase example: couldn't find a pages directory #8893

matchatype opened this issue Sep 28, 2019 · 58 comments · Fixed by #8896 or yukin01/portfolio#64
Labels
examples Issue/PR related to examples good first issue Easy to fix issues, good for newcomers

Comments

@matchatype
Copy link

matchatype commented Sep 28, 2019

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

image

System information

  • OS: [macOS]
  • Version of Next.js: [9.0.7]
@Timer Timer added this to the 9.0.8 milestone Sep 28, 2019
@ijjk
Copy link
Member

ijjk commented Sep 28, 2019

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?

Screen Shot 2019-09-28 at 17 51 55

@ijjk ijjk added please add a complete reproduction The issue lacks information for further investigation and removed Type: Needs Investigation labels Sep 28, 2019
@matchatype
Copy link
Author

@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
Copy link
Author

matchatype commented Sep 28, 2019

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.

@ijjk ijjk added Type: Bug and removed please add a complete reproduction The issue lacks information for further investigation labels Sep 28, 2019
@wouterds
Copy link

wouterds commented Sep 28, 2019

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

@yestoall
Copy link

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

@merrywhether
Copy link

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
Copy link

wouterds commented Oct 1, 2019

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

@cinnabarhorse
Copy link

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
Copy link

wouterds commented Oct 2, 2019 via email

@cinnabarhorse
Copy link

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

@notthatnathan
Copy link

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
Copy link

@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
Copy link

Ferezoz commented Mar 17, 2020

@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
Copy link

huan231 commented Mar 23, 2020

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

works fine for me

@ryudice
Copy link

ryudice commented Mar 28, 2020

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

@scottie-schneider
Copy link

@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
Copy link

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).
Screen Shot 2020-04-01 at 6 13 00 PM

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
Copy link

honi commented Apr 1, 2020

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
Copy link

rosgoo commented Apr 1, 2020

@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
Copy link

@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
Copy link

rosgoo commented Apr 5, 2020

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
Copy link

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).
Screen Shot 2020-04-01 at 6 13 00 PM

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
Copy link

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
Copy link

Ferezoz commented May 20, 2020

@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
Copy link

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

@Timer Timer removed the help wanted label Jun 3, 2020
@SaschaHeyer
Copy link

What is the recommended solution for this issue?

@yestoall
Copy link

yestoall commented Jul 7, 2020 via email

@rosborn92
Copy link

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
Copy link

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

@RiczCalixto
Copy link

RiczCalixto commented Dec 6, 2020

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
Copy link
Contributor

maerzhase commented Feb 9, 2021

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

maerzhase added a commit to maerzhase/next.js that referenced this issue Feb 9, 2021
@jthegedus
Copy link
Contributor

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
Copy link
Member

leerob commented Feb 9, 2021

#21971

@leerob leerob closed this as completed Feb 9, 2021
@balazsorban44
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue/PR related to examples good first issue Easy to fix issues, good for newcomers
Projects
None yet