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

Question

[Дмитрий Путилов]

Всем привет, возникла проблема при разработке на 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>
);

А вот сами ошибки

Comments

[szQocks]

это layout.tsx ?

[Дмитрий Путилов]

szQocks, Нет, это просто обертка, SidebarContainer, куда передается children. Я использую FSD и вот он хранится в widgets

[szQocks]

Дмитрий Путилов, хм, хз подобной ошибки не видел, ну покажи где используешь его

[Дмитрий Путилов]

szQocks, Я использую его в pages/index.tsx

import { AxiosResponse } from "axios";
import { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next";
import { TracksList } from "@widgets/clips";
import { Title } from "@widgets/clips";
import { Pagination } from "@widgets/custom-pagination";
import { SidebarContainer } from "@widgets/sidebar";
import type { IFilterProps } from "@features/filter";
import { LIMIT } from "@/shared/libs/global";
import { AxiosInstance } from "@shared/api";
import { IResponseTracks } from "@shared/types";

interface IStaticProps extends IFilterProps {
  tracks: IResponseTracks[];
  totalTracks: number;
}

const Main: NextPage<IStaticProps> = ({
  tracks,
  totalTracks,
  filter_type,
  filter_category,
}) => (
  <SidebarContainer>
    <Title filter_category={filter_category} filter_type={filter_type} />
    <TracksList tracks={tracks} />
    <Pagination total={totalTracks} />
  </SidebarContainer>
);

export default Main;

export const getServerSideProps: GetServerSideProps<IStaticProps> = async ({
  query,
}: GetServerSidePropsContext) => {
  try {
    const { page, category, type } = query;

    const type_filter = typeof type === "string" && `&type.name=${type}`;
    const category_filter = typeof category === "string" && `&q=${category}`;

    const response: AxiosResponse<IResponseTracks[]> = await AxiosInstance.get(
      `tracks?_page=${page || 1}&_limit=${
        LIMIT + (type_filter || "" + (category_filter || ""))
      }`,
    );

    const totalTracks: number = parseInt(response.headers["x-total-count"]);

    return {
      props: {
        tracks: response.data,
        ...(typeof type === "string" ? { filter_type: type } : {}),
        ...(typeof category === "string" ? { filter_category: category } : {}),
        totalTracks,
      },
    };
  } catch (e) {
    return {
      notFound: true,
    };
  }
};

Фишка в том, что ошибка есть на мобилке, а на ПК нет

[szQocks]

Дмитрий Путилов, хм, без понятия

[Дмитрий Путилов]

szQocks, Смотри, я использую framer-motion, а есть вероятность, что проблема в нем?

Код SideBar.tsx

import { AnimatePresence, motion } from "framer-motion";
import { 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 handlerBurgerMenu = () => setActive((state) => !state);
  const mobile = useScreenResolution();

  return (
    <>
      <BurgerIcon onClick={handlerBurgerMenu} active={active} />
      <AnimatePresence>
        {(!mobile || (mobile && 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>
    </>
  );
};

[szQocks]

Дмитрий Путилов, не знаю, я даже знать не знаю что такое framer-motion, ты можешь проверить не отрисовывая Sidebar

[Дмитрий Путилов]

szQocks, Я понял в чем проблема была, в том, что SideBar на стороне клиента по факту, а все что делается на стороне клиента, должно быть занесено в useEffect. Вообщем, я сделал вот так вот, и мне помогло

Вот

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>
    </>
  );
};

Кст советую посмотреть про framer-motion, мощный инструмент для анимаций)

Answer 1

[Дмитрий Путилов]

Чтобы исправить эту ошибку, следует убедиться, что компоненты, которые используются в приложении, ведут себя одинаково как на сервере, так и на клиенте. А у меня мой

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 можно посмотреть в комментариях

Comments

[Enkratia]

Это ненормально, то, что клиентский html не равен серверному html? Я же могу в зависимости от того, какой url в адресной строке вывести отличный html Почему в этом конкретном случае так нельзя делать, почему тут вдруг возникает проблема гидрации?