import { getSlides } from "./api/getSlides";
import Slider from "./ui/Slider";

const HeroSlider = async () => {
  const slides = await getSlides();
  console.log(slides);

  return (
    <>
      {
        slides &&
          <Slider data={slides} />
      }
    </>
  );
};

export default HeroSlider;

import Image from "next/image";
import BestOffersSlider from "@/shared/bestOffersSlider/BestOffersSlider";
import PopularProductsSlider from "@/shared/popularProductsSlider/PopularProductsSlider";
import Footer from "../footer/Footer";
import ReviewsHomeSlider from "@/shared/reviewsHomeSlider/ReviewsHomeSlider";
import HeroSlider from "@/shared/heroSlider/HeroSlider";

const Main = () => {
  return (
    <>
      <main>
        <section className="first-screen-section">
          <div className="inside">
            <div className="first-screen">
              <div className="first-screen-slider swiper-container">
                <HeroSlider />
              </div>
            </div>
          </div>
        </section>

I fetch data in the server component, this component is imported in the overlying component. When building I get the Minified React error #31. There are no errors in dev mode. This component does not lie directly on the page. The error occurs because this component is asynchronous, but I don’t understand how to fix it