Next.js Discord

Discord Forum

Hydration Error

Unanswered
mahir posted this in #help-forum
Open in Discord
mahirOP
Hey! I'm using react-map-gl to render a Mapbox container and I am using a context to pass data between two different components.

Now the issue is that I am getting a Hydration error, that I cannot figure it. To me, the code looks great, but I don't know what's causing the error.

Thank you in advance.

Error:
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:6997:9)
    at tryToClaimNextHydratableSuspenseInstance (react-dom.development.js:7136:7)
    ...
app-index.js:33 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:41
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
errorHydratingContainer @ react-dom.development.js:35993
    ...
react-dom.development.js:24465 Uncaught Error: Unknown root exit status.
    at finishConcurrentRender (react-dom.development.js:24465:15)
    at performConcurrentWorkOnRoot (react-dom.development.js:24343:9)
    at workLoop (scheduler.development.js:261:34)
    at flushWork (scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

8 Replies

DirtyCajunRice | AppDir
wait to render till mount
@DirtyCajunRice | AppDir wait to render till mount
mahirOP
doesn't useEffect do that by default?
@mahir doesn't useEffect do that by default?
DirtyCajunRice | AppDir
only whats inside the useeffect
so you add a const [mounted, setMounted] = useState(false)
and return null until mounted true
@DirtyCajunRice | AppDir only whats inside the useeffect
mahirOP
it's calling another async function, that gets from an API
useEffect(() => {
      getCoords(address)
        .then(res => {
          setAddressCoords({
            longitude: res[0],
            latitude: res[1],
            coords: res
          });
        });
  }, [address]);

  async function getCoords(add) {
    const req = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${add}.json?access_token=${mapboxToken}`, {
      method: "GET",
      headers: {
        "content-type": "application/json"
      }
    });
    const json = await req.json();
    return add ? json.features[0].center : [0, 0];
  }
@mahir it's calling another async function, that gets from an API
DirtyCajunRice | AppDir
why not call that in a server component…?