1

I am rendering two different sections on my page because on desktop it should be a slider, and on mobile all should scroll. I'm using react-responsive, and on mobile I'm getting an error (3 times the same), but not on desktop load. If I close the warning, I can see the mobile code, without issues, the console shows that screen was detected as mobile. So how come I get this error?

enter image description here

My code looks like this:


    const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
      const handleMediaQueryChange = (matches) => {
        if (matches) {
         // console.log("MOBILE");
        } else {
         // console.log("DESKTOP");
        }
      };
      handleMediaQueryChange(isMobile);
      useEffect(() => {
        handleMediaQueryChange(isMobile);
      }, [isMobile]);

then inside the return (

      {!isMobile && (
          <>
            <swiper-container init="false" ref={swiperElRef}>
               <div className="swiper-slide">data</div>
               <div className="swiper-slide">data</div>
            </swiper-container> 
            [...]
     </>
        )}

          {isMobile && ( 
             <>
              <div className="images-wrapper">
                 <div className="swiper-slide">data</div>
                 <div className="swiper-slide">data</div>              
              </div>
            </>
          )}

Normally, instead of the div that I put inside, i have a . Inside each slice, I have a div . The slider is not initializing on mobile. I tried to conditionnally render that class but it doesn't work. If I could also have pointers on that...

  <>
 <motion.div ref={ref}
   className={`${!isMobile && 'swiper-slide'}`} style={{ opacity, position }} lazy="true">
Dikeneko
  • 344
  • 4
  • 19
  • I guess this might be related to the fact that when rendering on the server there is no screen size. – Camilo Jun 20 '23 at 16:26
  • Thank you @Camilo, what do you mean? – Dikeneko Jun 20 '23 at 16:30
  • This explains the problem with SSR and this library https://github.com/yocontra/react-responsive/issues/298 – Camilo Jun 20 '23 at 16:37
  • Thank you! I've tried implementing the solution with react-hydration-provider, but now it just says it's desktop all the time.. – Dikeneko Jun 20 '23 at 16:58
  • I would try this approach https://github.com/yocontra/react-responsive#forcing-a-device-with-the-device-prop – Camilo Jun 20 '23 at 17:13

0 Answers0