Console Error : Hydration issue #68

leggin2020 · 2025-01-09T00:32:28Z

Getting the following error as soon as I run llamacoder locally:

Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

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.

https://react.dev/link/hydration-mismatch

...

<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>

<HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>

<InnerLayoutRouter parallelRouterKey="children" url="/" tree={[...]} childNodes={Map} ...>

<body
className="flex min-h-full flex-col bg-gray-100 text-gray-900 antialiased"

                        __processed_55e093f3-41ae-4c34-aed3-6a0748d8e9d7__="true"

                        bis_register="W3sibWFzdGVyIjp0cnVlLCJleHRlbnNpb25JZCI6ImVwcGlvY2VtaG1ubGJoanBsY2drb2ZjaW..."
                      >
                        ...
                          <ClientPageRoot Component={function Home} searchParams={{}} params={{}}>
                            <Home params={Promise} searchParams={Promise}>
                              <div
                                className="relative flex grow flex-col"

                                bis_skin_checked="1"
                              >
                                <div
                                  className="absolute inset-0 flex justify-center"

                                  bis_skin_checked="1"
                                >
                                <div
                                  className="isolate flex h-full grow flex-col"

                                  bis_skin_checked="1"
                                >
                                  <Header>
                                    <header className="relative m...">
                                      <LinkComponent>
                                      <div
                                        className="absolute right-3"

                                        bis_skin_checked="1"
                                      >
                                  <div
                                    className="mt-10 flex grow flex-col items-center px-4 lg:mt-16"

                                    bis_skin_checked="1"
                                  >
                                    <a>
                                    <h1>
                                    <form className="relative p..." action={function action}>
                                      <Fieldset>
                                        <fieldset disabled={false}>
                                          <div
                                            className="relative flex rounded-xl border-4 border-gray-300 bg-whit..."

                                            bis_skin_checked="1"
                                          >
                                            <TextareaAutosize>
                                            <div
                                              className="pointer-events-none absolute inset-0 rounded-lg peer-fo..."

                                              bis_skin_checked="1"
                                            >
                                            <div
                                              className="absolute bottom-2 left-2 right-2.5 flex items-center ju..."

                                              bis_skin_checked="1"
                                            >
                                              <div
                                                className="flex items-center gap-3"

                                                bis_skin_checked="1"
                                              >
                                                <Select>
                                                <div
                                                  className="h-4 w-px bg-gray-200 max-sm:hidden"

                                                  bis_skin_checked="1"
                                                >
                                                <label>
                                                <div
                                                  className="h-4 w-px bg-gray-200 max-sm:hidden"

                                                  bis_skin_checked="1"
                                                >
                                                ...
                                              <div
                                                className="relative flex shrink-0 has-[:disabled]:opacity-50"

                                                bis_skin_checked="1"
                                              >
                                                <div
                                                  className="pointer-events-none absolute inset-0 -bottom-[1px] ..."

                                                  bis_skin_checked="1"
                                                >
                                                ...
                                            ...
                                          <div
                                            className="mt-4 flex w-full flex-wrap justify-center gap-3"

                                            bis_skin_checked="1"
                                          >
                                  <footer className="flex w-ful...">
                                    <div

                                      bis_skin_checked="1"
                                    >
                                      <div
                                        className="font-medium"

                                        bis_skin_checked="1"
                                      >
                                    <div
                                      className="flex space-x-4 pb-4 sm:pb-0"

                                      bis_skin_checked="1"
                                    >
                          ...
                        ...
                          <ToastViewport ref={null} className="fixed top-...">
                            <DismissableLayerBranch ref={{current:null}} role="region" aria-label="Notificati..." ...>
                              <Primitive.div role="region" aria-label="Notificati..." tabIndex={-1} style={{...}} ...>
                                <div
                                  role="region"
                                  aria-label="Notifications (F8)"
                                  tabIndex={-1}
                                  style={{pointerEvents:"none"}}
                                  ref={function}

```
                                  bis_skin_checked="1"
                                >
```
at createUnhandledError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js:27:49)
at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:44:56)
at console.error (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js:48:56)
at emitPendingHydrationWarnings (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4300:17)
at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:13611:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15200:19)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15081:11)
at workLoopConcurrent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15058:9)
at renderRootConcurrent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15033:15)
at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14350:13)
at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15955:7)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:44:48)

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Console Error : Hydration issue #68

Console Error : Hydration issue #68

leggin2020 commented Jan 9, 2025

Console Error : Hydration issue #68

Console Error : Hydration issue #68

Comments

leggin2020 commented Jan 9, 2025