Lost header on Payload homepage

[IRediTOTO]

Bug Report

Lost header, sometime it work, sometimes not GIF here

Steps to Reproduce

1. Go to https://payloadcms.com/blog/building-a-custom-field

Other Details

[JarrodMFlesch]

@IRediTOTO What are your window dimensions when this happens? are you zoomed in, what percent are you zoomed in to? For now I would recommend zooming out if you are.

[pcbal]

This also happens always when another instance of Next is run on port 3000. On zoom out it will come and on page refresh it will go off again. The only fix I could find for this at that situation was to change layout theme hero from home to content&media or default and change back to home later. What a "wonderful" fix !!!! The website frontend is so-so in many ways compared to payload cms.

[JarrodMFlesch]

@pcbal are you referring to our public website? or your own custom implementation of it?

If you are talking about the live website, could you please provide me with some reproduction steps?

If you are talking about your own implementation - are you up to date with master?

[pcbal]

@pcbal are you referring to our public website? or your own custom implementation of it?

If you are talking about the live website, could you please provide me with some reproduction steps?

If you are talking about your own implementation - are you up to date with master?

This behaviour is with your website repo after some minor edits. Whenever a build error happens this behaviour starts and usually got over when the page /home is published again or created anew from website-cms. Here is a log obtained after an error build and the header was not present at the 404 output page. bal@bal:~/projects/Next/website$ yarn dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /home/bal/projects/Next/website/.env warn - You have enabled experimental feature (appDir) in next.config.js. warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback event - compiled client and server successfully in 1404 ms (242 modules) wait - compiling /page (client and server)... event - compiled client and server successfully in 7.1s (1905 modules) Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using

. See https://reactjs.org/link/warning-keys for more information. at div at Announcements (webpack-internal:///(sc_client)/./src/components/Announcements/index.tsx:23:26) at Lazy at HeaderThemeProvider (webpack-internal:///(sc_client)/./src/providers/HeaderTheme/index.tsx:19:32) at div at PageTransition (webpack-internal:///(sc_client)/./src/providers/PageTransition/index.tsx:17:13) at ModalProvider (webpack-internal:///(sc_client)/./node_modules/@faceless-ui/modal/dist/ModalProvider/index.js:65:29) at ComputedCSSValuesProvider (webpack-internal:///(sc_client)/./src/providers/ComputedCSSValues/index.tsx:23:38) at SettingsProvider (webpack-internal:///(sc_client)/./node_modules/@faceless-ui/css-grid/dist/Settings/index.js:36:26) at div at ThemeProvider (webpack-internal:///(sc_client)/./src/providers/Theme/index.tsx:22:26) at ThemePreferenceProvider (webpack-internal:///(sc_client)/./src/providers/Theme/index.tsx:48:36) at WindowInfoProvider (webpack-internal:///(sc_client)/./node_modules/@faceless-ui/window-info/dist/WindowInfoProvider/index.js:71:29) at MouseInfoProvider (webpack-internal:///(sc_client)/./node_modules/@faceless-ui/mouse-info/dist/MouseInfoProvider/index.js:69:26) at ScrollInfoProvider (webpack-internal:///(sc_client)/./node_modules/@faceless-ui/scroll-info/dist/ScrollInfoProvider/index.js:79:26) at CookiesProvider (webpack-internal:///(sc_client)/./node_modules/react-cookie/cjs/CookiesProvider.js:52:24) at Providers (webpack-internal:///(sc_client)/./src/providers/index.tsx:37:22) at Lazy at body at html at ReactDevOverlay (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:58:9) at HotReload (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:18:22) at Router (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:96:23) at ErrorBoundaryHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:61:9) at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:73:26) at AppRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:19:13) at Lazy at Lazy at ServerComponentWrapper (/home/bal/projects/Next/website/node_modules/next/dist/server/app-render.js:392:28) at ServerComponentWrapper (/home/bal/projects/Next/website/node_modules/next/dist/server/app-render.js:392:28) at InsertedHTML (/home/bal/projects/Next/website/node_modules/next/dist/server/app-render.js:1118:33) wait - compiling /blog/[slug]/page (client and server)... event - compiled client and server successfully in 3.3s (1918 modules)

Before zoom in After zoom in the header returns After clearing error and resending page from cms

[JarrodMFlesch]

@pcbal So do you think it's the 404 page that is broken?

You are up to date with the latest main branch right?

[pcbal]

Today I am up-to-date with fresh copies from the repo and am unable to reproduce the issue now. I think it may be over after a few recent commits for build errors. Earlier it had happened whenever and wherever the error occurred. If on pages collection home page was affected, if the posts collection blog page was affected etc. Anyway, you may close the issue for now and we are sure to reopen this if anything returns in due course. By the by the preview page is not implemented correctly here, and the required API folder and files missing from the repo. See the below screenshot.

@pcbal So do you think it's the 404 page that is broken?

You are up to date with the latest main branch right?

[JarrodMFlesch]

Sounds good, thanks for testing it out! I made updates to the header observer component, so I figured that would fix it.

re: preview - This is not supported in the app dir yet read about it here 👍