← Retour aux issues

Hydration failed because the server rendered HTML didn't match the client.

publié le , mis à jour
Avatar Codeberg de severosevero

Error de next.js sur http://localhost:8080 (local dev), sur master

## Error Type
Recoverable Error

## Error Message
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:

- 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

  ...
    <div className={"react-mo..."} style={{zIndex:2, ...}} ref={function useMotionRef.useCallback}>
      <SheetHeader>
      <SheetContent disableDrag={false}>
        <motion.div ref={function} className={"react-mo..."} style={{flexGrow:1, ...}} drag="y" dragElastic={0} ...>
          <MeasureLayout>
          <div className={"react-mo..."} draggable={false} style={{flexGrow:1, ...}} ...>
            <SheetScroller draggableAt="both" snap={2}>
              <div ref={null} className={"react-mo..."} style={{height:"100%", ...}}>
                <SheetContentWrapper>
                  <div className="ModalSheet..." style={{}}>
                    <Content visibleLog={[...]} setVisibleLog={function bound dispatchSetState} ...>
                      <ContentWrapper>
                        <section className="ContentUI_..." style={{}}>
                          <section>
                            <PlaceSearch>
                            <QuickBookmarks oldAllez={undefined} searchInput={undefined} locale="en" depuis={[...]}>
                              <Section>
+                               <section className="QuickBookmarks_Section_aB1xZ6" style={{}}>
                          ...



    at section (unknown:0:0)
    at QuickBookmarks (app/QuickBookmarks.tsx:61:48)
    at Content (app/Content.tsx:304:8)
    at ModalSheet (app/ModalSheet.tsx:116:9)
    at ModalSwitch (app/ModalSwitch.tsx:27:9)
    at Container (app/Container.tsx:394:5)
    at Page (about://React/Server/file:///home/severo/_dev/cartes/web/.next/dev/server/chunks/ssr/%5Broot-of-the-server%5D__10ahqjz._.js?13:6248:285)

## Code Frame
  59 | 							font-size: 80%;
  60 | 							margin-left: 0.3rem;
> 61 | 						`}
     |   ^
  62 | 						onClick={() => setTutorials({ ...tutorials, bookmarks: true })}
  63 | 					>
  64 | 						OK

Next.js version: 16.2.6 (Turbopack)
  1. Avatar Codeberg de laemlaem

    MMMh, celle-ci, je ne sais pas la reproduire.


✏️ Participer à la discussion