Next.js FOUC on Refresh | Mantine | Page 1

lucid saffron Jan 4, 2023, 7:54 PM

#

Issue:
I'm experiencing FOUC using Next.js and Mantine UI, both on development and production.
I've seen posts addressing it, but downgrading to Next.js 12.1.5 hasn't worked and also isn't a suitable solution for me right now.

My setup:
I use Next.js 13.1.1 (w/ TypeScript) and DO NOT use SSR, I use SSG, with React-Query (tRPC's wrapper for it specifically)
The packages I use around Mantine and their versions are as follows:

"@emotion/react": "^11.10.5",
"@emotion/server": "^11.10.0",
"@mantine/core": "^5.10.0",
"@mantine/dates": "^5.9.5",
"@mantine/dropzone": "^5.9.4",
"@mantine/form": "^5.9.4",
"@mantine/hooks": "^5.10.0",
"@mantine/next": "^5.10.0",
"@mantine/notifications": "^5.9.5",
"@mantine/styles": "^5.10.0"

Question:
Is there any way to solve this? It only happens once every 3-4 refreshes on development and on production is pretty infrequent also. I love Mantine and have adopted it fully across all my side-projects, I'd hate to have to seek an alternative given my admiration for it.

#

Next.js FOUC on Refresh

sinful flint Jan 4, 2023, 8:03 PM

#

See https://github.com/mantinedev/mantine-next-template, it has export script, there are no issues with ssr in any of the templates.

lost quarry Jun 23, 2023, 9:29 PM

#

sinful flint See https://github.com/mantinedev/mantine-next-template, it has export script, t...

Please can you clarify this response. I dont seems to get it. I have same issue currently

#

@sinful flint

#Next.js FOUC on Refresh