I see this error with the app, reported by NextJS, please fix it. The error is reported as HTML but presented visually to the user).

mirror of https://github.com/xavidop/cardex.git synced 2026-08-29 02:01:27 +00:00

A > before the line number in the error source usually indicates the line of interest:

> Console Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:. Error source: - A server/client branch `if (typeof window !== 'undefined')`.
> - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
> - Date formatting in a user's locale which doesn't match the server.
> - External changing data without sending a snapshot of it along with the HTML.
> - Invalid HTML tag nesting.
>
> It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
>
> See more info here: https://nextjs.org/docs/messages/react-hydration-error
>
>   ...
>     <HotReload assetPrefix="" globalError={[...]}>
>       <AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
>         <AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
>           <ReplaySsrOnlyErrors>
>           <DevRootHTTPAccessFallbackBoundary>
>             <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
>               <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
>                 <RedirectBoundary>
>                   <RedirectErrorBoundary router={{...}}>
>                     <Head>
>                     <link>
>                     <script>
>                     <script>
>                     <script>
>                     <script>
>                     <script>
>                     <script>
>                     <RootLayout>
>                       <html lang="en" className="inter_9e72...">
>                         <head>
>                         <body
>                           className="font-body antialiased min-h-screen flex flex-col"
> -                         data-new-gr-c-s-check-loaded="14.1238.0"
> -                         data-gr-ext-installed=""
>                         >
>                     ...
>         ...
>
>
> src/app/layout.tsx (30:7) @ RootLayout
>
>   28 |         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
>   29 |       </head>
> > 30 |       <body className="font-body antialiased min-h-screen flex flex-col">
>      |       ^
>   31 |         <FirebaseProvider>
>   32 |           <AuthProvider>
>   33 |             <Navbar />
>
> Call Stack
> 17
>
> Show 15 ignore-listed frame(s)
> body
> <anonymous> (0:0)
> RootLayout
> src/app/layout.tsx (30:7)

This commit is contained in:

Xavier Portilla Edo

2025-06-04 10:35:38 +00:00

parent c9b07289a6

commit f43288f757

1 changed files with 2 additions and 1 deletions

									
										src/app/layout.tsx
									
		+2
		-1
	
												View File
												
				@@ -1,3 +1,4 @@

				import type { Metadata } from 'next';

				import './globals.css';

				import { Inter } from 'next/font/google';

				@@ -27,7 +28,7 @@ export default function RootLayout({

				        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

				        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

				      </head>

				      <body className="font-body antialiased min-h-screen flex flex-col">

				      <body className="font-body antialiased min-h-screen flex flex-col" suppressHydrationWarning={true}>

				        <FirebaseProvider>

				          <AuthProvider>

				            <Navbar />