github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-10 07:38:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): hydration warning (#10120)

Browse Source 
We're encountering a hydration warning on the frontend due to a mismatch
in CSS module hashes. This happens because auto-generated classnames
from `next/font` and `geist` differ between server-side and client-side
rendering. The inconsistency triggers a warning when the client
rehydrates the server-rendered HTML.

![Screenshot 2025-06-05 at 17 20
06](https://github.com/user-attachments/assets/4270f94c-faab-4cad-9c8e-6fd0c27bd4d0)

### Changes 🏗️

Since the mismatch only affects the `<html>` tag and has no visible
impact on the UI, the most straightforward workaround is to suppress the
warning and still take advantage of `next/font` optimisations.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run the frontend locally
  - [x] Page loads without hydration warnings

---------

Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
This commit is contained in:
Ubbe
2025-06-05 21:13:00 +04:00
committed by GitHub
parent 781f138c09
commit 36634b7ba2
4 changed files with 232 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

450
autogpt_platform/frontend/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

1
autogpt_platform/frontend/src/app/layout.tsx
View File

@@ -23,6 +23,7 @@ export default async function RootLayout({
<html
lang="en"
className={`${fonts.poppins.variable} ${fonts.sans.variable} ${fonts.mono.variable}`}
suppressHydrationWarning
>
<head>
<GoogleAnalytics

10
autogpt_platform/frontend/src/components/styles/fonts.ts
View File

@@ -1,15 +1,17 @@
import { Poppins } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { GeistSans as geistSans } from "geist/font/sans";
import { GeistMono as geistMono } from "geist/font/mono";
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700"] as const,
variable: "--font-poppins",
display: "swap",
preload: true,
});
export const fonts = {
poppins,
sans: GeistSans,
mono: GeistMono,
sans: geistSans,
mono: geistMono,
};

1
autogpt_platform/frontend/tailwind.config.ts
View File

@@ -16,7 +16,6 @@ const config = {
fontFamily: {
sans: ["var(--font-geist-sans)"],
mono: ["var(--font-geist-mono)"],
// Include the custom font family
poppins: ["var(--font-poppins)"],
},
colors: {