llamacoder icon indicating copy to clipboard operation
llamacoder copied to clipboard

Console Error : Hydration issue

Open leggin2020 opened this issue 1 month ago • 0 comments

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

... <RenderFromTemplateContext> <ScrollAndFocusHandler segmentPath={[...]}> <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}> <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}> <LoadingBoundary loading={null}> <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}> <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <InnerLayoutRouter parallelRouterKey="children" url="/" tree={[...]} childNodes={Map} ...> <Layout> <Providers> <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)

leggin2020 avatar Jan 09 '25 00:01 leggin2020