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

T

Xavier Portilla Edo f43288f757 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).

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)

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