Next.js: After cloning and running the with-firebase-hosting I got 404 page

[larrotta69]

In with-firebase-hosting I got 404 page once I run npm run serve and go to localhost:5000/

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

See the next server running, home page

Current Behavior

404 page

Steps to Reproduce (for bugs)

1. Clone the repo
2. Install dependencies then add my firebase project name
3. npm run serve

[sarovin]

Is it a duplicate of #3634?

[larrotta69]

I didn't do a change for the code, just put my firebase project name and is not working

[lfades]

Hi, which OS are you using ?, do you get an error with firebase serve --only functions ?

The project is fine and well configured, I believe is an issue with the versions of firebase packages or a bad installation of them, I never managed to run even the quickstart of the docs for firebase functions but it was because even the command npm i -g firebase-tools was giving me errors (I'm on windows, surely in Linux or Mac it may be different)

[NickDelfino]

I am also seeing this same issue on MacOS with this example. No modifications besides changing the project name.

When I deploy, I get the logs from the failure and they show a module missing in the next folder.
{ Error: Cannot find module '/Users/nickdelfino/Documents/reactjs/test/app/node_modules/next/dist/pages/_document.js' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.10 (/user_code/next/dist/bundles/pages/_document.js:78:18) at __webpack_require__ (/user_code/next/dist/bundles/pages/_document.js:23:31) at Object.9 (/user_code/next/dist/bundles/pages/_document.js:85:18) at __webpack_require__ (/user_code/next/dist/bundles/pages/_document.js:23:31) at /user_code/next/dist/bundles/pages/_document.js:70:18 at Object.<anonymous> (/user_code/next/dist/bundles/pages/_document.js:73:10) code: 'MODULE_NOT_FOUND' }

Not sure why they say that stuff is missing. I am building all the next stuff properly.

[jthegedus]

hey all, this may be the same as this issue https://github.com/zeit/next.js/issues/3167

@larrotta69 please give the whole thread a read.

[NickDelfino]

I am getting an internal server error for both the local firebase serve and also after executing deploy as per the example instructions. I get the error shown above. Seems like something isn't getting copied over to the next directory as expected.

Could be an issue with something on my machine or firebase instance but I am following the instructions. Can provide more info if needed.

[jthegedus]

@NickDelfino On the deployed code too.. hmm. I'm not sure if the example pins the Next version to v4, but it has not been updated to v5 yet so that may be the issue. I am working on an update to v5 atm. I will go through some testing this evening and get back to you.

[NickDelfino]

@jthegedus did you have any luck reproducing this issue? Or anyone else who may have tried? No worries or rush. Thanks!

[abelta]

Can confirm that this is happening both in local and in production. It's giving me a 500, not a 404, though.

[jthegedus]

Hi all, please test https://github.com/zeit/next.js/pull/3886 to see if it fixes your problems.

This error:

{ Error: Cannot find module '/home/james/Projects/Personal/firebase-functions-next-example/node_modules/next/dist/pages/_error.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.8 (/user_code/next/dist/bundles/pages/_error.js:86:18)
    at __webpack_require__ (/user_code/next/dist/bundles/pages/_error.js:23:31)
    at Object.7 (/user_code/next/dist/bundles/pages/_error.js:78:18)
    at __webpack_require__ (/user_code/next/dist/bundles/pages/_error.js:23:31)
    at /user_code/next/dist/bundles/pages/_error.js:70:18
    at Object.<anonymous> (/user_code/next/dist/bundles/pages/_error.js:73:10) code: 'MODULE_NOT_FOUND' }

was fixed by adding a _error.js page to the pages/ dir taken from: https://github.com/zeit/next.js/#custom-error-handling

After adding that I then got:

{ Error: Cannot find module '/home/james/Projects/Personal/firebase-functions-next-example/node_modules/next/dist/pages/_document.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.10 (/user_code/next/dist/bundles/pages/_document.js:78:18)
    at __webpack_require__ (/user_code/next/dist/bundles/pages/_document.js:23:31)
    at Object.9 (/user_code/next/dist/bundles/pages/_document.js:85:18)
    at __webpack_require__ (/user_code/next/dist/bundles/pages/_document.js:23:31)
    at /user_code/next/dist/bundles/pages/_document.js:70:18
    at Object.<anonymous> (/user_code/next/dist/bundles/pages/_document.js:73:10) code: 'MODULE_NOT_FOUND' }

which was fixed by adding a _document.js page to the pages/ dir taken from: https://github.com/zeit/next.js/#custom-document (minus the styled-jsx stuff).

This issue either started because of the upgrade to next.js 5 or because of some flux within the Firebase Functions product. Due to this issue opening the same number of days ago as the next.js dep upgrade I would put it down to that.

Thanks to https://github.com/JulienHe for previously solving this issue and sharing with me. Checkout his latest blog post about next-routes with Firebase Hosting.

[NickDelfino]

This worked for me! Thanks for looking into this!