Nextjs: Expected server HTML to contain a matching <div> in <div>

I have tried all the available options and all of them brings me back this same error.

Example: <MediaQuery minDeviceWidth={1024}> <div>Desktop Only</div> </MediaQuery>

[bhavesh-chaudhari]

Dynamic import fixes this issue -

import dynamic from "next/dynamic"

const MediaQuery = dynamic(()=>{
  return import("react-responsive")
}, {ssr: false})

Useful link - Dynamic import with no ssr

[Tomekmularczyk]

@ivanhueso it’s because server renders different content than what client does. You need to “somehow” tell react-responsive during SSR what is the size screen of the client app.

Here is an example: https://codesandbox.io/s/gifted-euler-3ykdc.

First - in _document.js - you check from request headers what is the client device with ua-parser-js. Then you wrap the whole app with ResponsiveContext.Provider, so that everything renders accordingly.

There is one catch though. That is with static pre-rendering - if NEXT see a potential for optimization it will render webpage upfront as a static html. This means that, now there is no way to tell whether this page will be displayed on the mobile or desktop (because there is no server that could decipher this from a request and then render page). This is why I added getServerSideProps method in my example, to prevent that optimization. But I don’t think this is something to be fixed with react-responsive itself…