#_index.tsx vs root.tsx

1 messages · Page 1 of 1 (latest)

lone quarry
#

Root will run every single time on every single route your application ever makes. _index will only run when a user requests “/“ in your application

#

As for hydration errors those are generally caused by a script that runs before react has fully finished its first render pass

torpid folio
#

so I put everything within root.tsx and only MetaFunction in _index.tsx and it works great

lone quarry
#

In the case where you have no other routes root and index are essentially one and the same. The second you add another route root is different from _index

#

If you have example code I might be able to point out areas where a hydration error may occur

#

Just a meta function shouldn’t cause a hydration error, it’s generally a browser plugin, or you adding in a script that adds things to the don outside of react, or a date that renders on the server and renders a different time on the client

#

Those sorts of things

torpid folio
#

problem was... I found that root.tsx was more for layout -- so I remove everything from root.tsx except layout and all the components into _index.tsx -- and then the client console started showing React hydration error (#418)

lone quarry
torpid folio
#

These are the three main files... the express server, the root and _index

#

the rest are just subcomponents.

#

when I switch this around, I setart seeing the errors. I'm going to now send you these same files, but reversed, and this is when the error occurs. I won't send the server as that never changes. but please know that while trying to narrow down the issue, in the _index I actually commented out the loader and my components, and I still saw the hydration error on the client. And when I removed the script tag to try to figure out why react was out of sync on the client, and did a viewpage source, the <head><body><html> tags were duplicated. I'm going to send you the files now in the format where it breaks.

lone quarry
#

So with no loader and no components other than a standard div in your _index file you get a hydration error? And you see duplicate tags coming back when react is disabled? In assuming then the hydration error is regular dom validation happening and purging incorrect html and react not liking that. I don’t have a strong idea of what would cause html head and body tags to get duplicated. What if you add a random div with hello or something in the root, does that get duplicated as well?

torpid folio
#

this is the error:

entry.client-Boj_9Ez2.js?client-route=1:10 Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at lu (components-dz-p3zIz.js:38:4797)
at Ld (components-dz-p3zIz.js:40:45477)
at _d (components-dz-p3zIz.js:40:39686)
at jm (components-dz-p3zIz.js:40:39658)
at kd (components-dz-p3zIz.js:40:34664)
at R (components-dz-p3zIz.js:25:1569)
at MessagePort.de (components-dz-p3zIz.js:25:1938)

Minified React error #418 – React

The library for web and native user interfaces

#

If I set up a zoom call, to review what I'm seeing, would you join?

tardy pebble
#

I believe the error occurs because in the App component, the Outlet component is wrapped by the Layout component. What would happen if you simply returned the Outlet component in the App component, as shown below?

// root.tsx
...

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}
lone quarry