Skip to content

Instantly share code, notes, and snippets.

@jacobhq

jacobhq/error.md

Created January 18, 2025 10:50
Show Gist options
  • Save jacobhq/082d43720e92b539d6a7875b95513993 to your computer and use it in GitHub Desktop.
Save jacobhq/082d43720e92b539d6a7875b95513993 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jacobhq created this gist Jan 18, 2025.
    97 changes: 97 additions & 0 deletions error.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    ```
    hook.js:608 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
    ...
    <@mantine/core/MantineProvider theme={{...}} cssVariablesResolver={function resolver}>
    <@mantine/core/MantineThemeProvider theme={{...}}>
    <@mantine/CssVariables>
    <MantineClasses>
    <@mantine/core/AppShell layout="alt" header={{height:60}} navbar={{width:300, ...}}>
    <Provider value={{...}}>
    <AppShellMediaStyles>
    <@mantine/core/Box ref={null} className="m_89ab340 ..." style={{...}} mod={[...]}>
    <div ref={null} style={{...}} className="m_89ab340 ..." data-variant={undefined} data-size={undefined} ...>
    <Navbar toggle={function}>
    <@mantine/core/AppShellHeader p="sm">
    <@mantine/core/Box component="header" ref={null} mod={[...]} className="m_3b16f56b..." style={{}} ...>
    <header ref={null} style={{...}} className="m_3b16f56b..." data-variant={undefined} ...>
    <@mantine/core/Flex justify="space-between">
    <@mantine/core/Box ref={null} className="m_8bffd616..." style={{...}}>
    <div
    ref={null}
    style={{justifyContent:"space-between"}}
    + className="m_8bffd616 mantine-Flex-root __m__-Rare"
    - className="m_8bffd616 mantine-Flex-root __m__-R2mrh"
    data-variant={undefined}
    data-size={undefined}
    size={undefined}
    >
    <@mantine/core/Button>
    <@mantine/core/Box>
    <@mantine/core/Flex align="center" gap={8}>
    <@mantine/core/Box ref={null} className="m_8bffd616..." style={{gap:"calc(...", ...}}>
    <div
    ref={null}
    style={{gap:"calc(0.5re...",alignItems:"center"}}
    + className="m_8bffd616 mantine-Flex-root __m__-R3mqre"
    - className="m_8bffd616 mantine-Flex-root __m__-Rtmmrh"
    data-variant={undefined}
    data-size={undefined}
    size={undefined}
    >
    <NavbarActions>
    <@mantine/core/Flex gap={8}>
    <@mantine/core/Box ref={null} className="m_8bffd616..." style={{gap:"calc(..."}}>
    <div
    ref={null}
    style={{gap:"calc(0.5re..."}}
    + className="m_8bffd616 mantine-Flex-root __m__-Rdnmqre"
    - className="m_8bffd616 mantine-Flex-root __m__-R3dtmmrh"
    data-variant={undefined}
    data-size={undefined}
    size={undefined}
    >
    ...
    ...
    <@mantine/core/Box component="nav" ref={null} mod={[...]} className="m_45252eee..." style={{}} p="md" ...>
    <nav ref={null} style={{...}} className="m_45252eee..." data-variant={undefined} ...>
    <SidebarHeader close={function}>
    <@mantine/core/AppShellSection>
    <@mantine/core/Box ref={null} mod={[...]} className="m_6dcfc7c7..." style={{}}>
    <div ref={null} style={{}} className="m_6dcfc7c7..." data-variant={undefined} ...>
    <@mantine/core/Flex mb={20} w="100%" justify="space-between">
    <@mantine/core/Box ref={null} className="m_8bffd616..." style={{...}} mb={20} w="100%">
    <div
    ref={null}
    style={{justifyContent:"space-between",marginBottom:"calc(1.25r...",width:"100%"}}
    + className="m_8bffd616 mantine-Flex-root __m__-Rarbe"
    - className="m_8bffd616 mantine-Flex-root __m__-R2mqrh"
    data-variant={undefined}
    data-size={undefined}
    size={undefined}
    >
    <@mantine/core/Flex gap={10} align="center" w="auto" justify="center">
    <@mantine/core/Box ref={null} className="m_8bffd616..." ...>
    <div
    ref={null}
    style={{gap:"calc(0.625...",alignItems:"center",justifyContent:"center",width:"auto"}}
    + className="m_8bffd616 mantine-Flex-root __m__-R1mqrbe"
    - className="m_8bffd616 mantine-Flex-root __m__-Rdmmqrh"
    data-variant={undefined}
    data-size={undefined}
    size={undefined}
    >
    ...
    ...
    ...
    ```