Как исправить ошибку nextjs Warning: Expected server HTML to contain a matching in?

Всем привет, возникла проблема при разработке на NextJS. Я написал код, на ПК все работает, перешел в мобильную версию на телефоне, падает вот в такую вот ошибку, раньше на ПК тоже падало, но после перестало как я main на div поменял, но теперь и на div ругается тоже
Ошибка как раз таки вот тут вот
import { FC, PropsWithChildren } from "react";
import { Sidebar } from "../sidebar/Sidebar";
import classes from "./SidebarContainer.module.scss";

export const SidebarContainer: FC<PropsWithChildren> = ({ children }) => (
  <section className={classes.sidebarContainer}>
    <Sidebar />
    <div className={classes.mainContainer}>{children}</div>
  </section>
);

А вот сами ошибки
65040f8f1f2c8877395964.png
65040f99280a9174226299.jpeg
65040f9fd3240088423339.jpeg
  • Вопрос задан
  • 1061 просмотр
Решения вопроса 1
@Brepex Автор вопроса
Чтобы исправить эту ошибку, следует убедиться, что компоненты, которые используются в приложении, ведут себя одинаково как на сервере, так и на клиенте. А у меня мой
Sidebar
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";
import { MenuList } from "@features/sidebar";
import { MakeOrderButton, PersonalAccount } from "@entities/sidebar";
import { LogotypeIcon } from "@shared/images";
import { useScreenResolution } from "@shared/libs/global";
import { BurgerIcon, HorizontalLine } from "@shared/ui";
import classes from "./Sidebar.module.scss";

const initialSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const animateSidebarAnimate = {
  x: 0,
  opacity: 1,
};

const exitSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const transitionSidebarAnimate = {
  x: -100,
  opacity: 0,
};

export const Sidebar = () => {
  const [active, setActive] = useState<boolean>(false);
  const [isMobile, setIsMobile] = useState(false);

  const mobile = useScreenResolution();
  const handlerBurgerMenu = () => setActive((state) => !state);

  useEffect(() => {
    setIsMobile(mobile);
  }, [mobile]);

  return (
    <>
      <BurgerIcon onClick={handlerBurgerMenu} active={active} />
      <AnimatePresence>
        {(!isMobile || (isMobile && active)) && (
          <motion.header
            transition={transitionSidebarAnimate}
            initial={initialSidebarAnimate}
            animate={animateSidebarAnimate}
            exit={exitSidebarAnimate}
            className={classes.headerSidebar}
          >
            <LogotypeIcon className={classes.logotypeSidebar} />
            <MakeOrderButton className={classes.orderButton} />
            <HorizontalLine />
            <MenuList className={classes.menuList} />
            <HorizontalLine />
            <PersonalAccount className={classes.personalAccount} />
          </motion.header>
        )}
      </AnimatePresence>
    </>
  );
};


Отрисовывался по условию mobile, который присваивается на стороне клиента, поэтому надо это присваивание вынести в useEffect и ошибки не будет. Старый код Sidebar можно посмотреть в комментариях
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы