firebase-tools
firebase-tools copied to clipboard
Framework hosting : Navigation between pages is always hard reload
EDIT: Better naming for the bug
App Directory: Navigation between pages is always hard reload Next.js Router.push() reloads page automatically on firebase
[REQUIRED] Environment info
Integration: Enabled web frameworks Packages Version: firebase: ^9.22.0 firebase-admin: ^11.8.0 react: 18.2.0 next: ^13.4.3 Firebase CLI version: 12.4.4 Operating System: Ubuntu 22.04
fIrebase.json
"hosting": { "source": ".", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "frameworksBackend": { "region": "europe-west1" }, "rewrites": [ { "source": "**", "destination": "/index.html" } ] }
firebaserc
{ "projects": { "default": "XXXX" } }
[REQUIRED] Test case
[REQUIRED] Steps to reproduce
I will attempt to create a minimal project if necessary. My Next.js application does not have any unusual features.
[REQUIRED] Expected behavior
Successful deployment of a Next.js 13 application. Dynamic routes function as intended. Deployment process is smooth and without issues.
[REQUIRED] Actual behavior
Comand line deploy --debug shows no errors but I am facing some issues: Only the run.app cloud run works as expected, but the web.app (and my custom domain) won't fully work:
- Dynamic routes don't function properly or consistently; the route loads indefinitely or redirects to '/'.
- React context seems to reset entirely when navigating through the application. This issue doesn't occur on run.app. The root cause might be a momentarily change in the authentication state or another bug.
- 404 Errors on manifest files and cache if using next-pwa to make it a PWA. Indeed I also had https://github.com/firebase/firebase-tools/issues/6135.
e.g.
workbox-7c2a5a06.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://xxx.io/_next/app-build-manifest.json","status":404}]
In the cloud functions logs I can see the 404 errors and 304 e.g
2023-07-17 12:44:29.030 GET304 719 B12 msChrome 114 https://XXX-XXX-ew.a.run.app/firebase-messaging-sw.js GET404 3.25 KB36 msWhatsApp/2.23.12.78 A https://fh-14db9a1xxx891---xxx-xx-ew.a.run.app/xxxx.io/booking GET404 4.06 KB3.6 sChrome 114 https://fh-14db9a1d1xx---xxxx-xxx-ew.a.run.app/_next/static/css/8c71518ccbccb8e4.css GET404 4.01 KB2 sChrome 114 https://fh-14db9a1d16a5e891---xxx-xxx-ew.a.run.app/_next/static/chunks/webpack-1ef83629ce8faadf.js
At first I also got memory limit errors so I increased to 512
The key questions I have are:
Why are both run.app and web.app necessary, and how do they handle dynamic routes through the cloud function? This isn't clear from the documentation. Could I redirect my custom domain to the cloud.run? I previously faced the 404 Error associated with the pinTags issue, which was resolved by re-enabling pinTags. However, could this have any lingering effects?