Next.js Discord

Discord Forum

Nextjs App router Loading of third party styling not in time

Unanswered
Wesley Janse posted this in #help-forum
Open in Discord
Wesley JanseOP
Hi I've implemented SwiperJs for React, but I see that on initial render, the styling imported in my component is not applied, and it takes a second for it to get the styling and show the correct configuration of the slider.

Just using the example slider of their documentation already gives the issue.

Using Pages directory gives no issues at all.

Check the video for the example of the issue. if anyone has a clue on how to fix this, I highly appriciate it.

6 Replies

fuma
Seems like it has some problems with the Carousel component when pre-rendering your page, could you provide some code to reproduce the problem?
Wesley JanseOP
In the recording is the loading of the component used:

Component:
'use client';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

const Slider = () => {
  return (
    <Swiper
      className="w-full"
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

export default Slider;


in page.tsx: 

import { fetchHomepage } from '@/contentful/data';
import { CFModelMapperHomepage } from '@elision/ui';
import { Metadata } from 'next';
import { draftMode } from 'next/headers';
import Slider from './slider';

type Props = {
  params: { locale: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const homepage = await fetchHomepage({
    preview: draftMode().isEnabled,
    locale: params.locale,
  });

  return {
    title: homepage.title,
    description: homepage.description,
  };
}

export default async function Page({ params }: Props) {
  const homepage = await fetchHomepage({
    preview: draftMode().isEnabled,
    locale: params.locale,
  });

  return (
    <div className="flex flex-col gap-8">
      <Slider />
      <CFModelMapperHomepage content={homepage.content} />
    </div>
  );
}


If you need anything else feel free to ask, but this is just the basic example component of swiperJs. so nothing special is happening
fuma
import 'swiper/css';

Does moving your css import to page.tsx work?

And I've checked their docs, they seem to recommend migrating to Swiper Element instead.
Wesley JanseOP
Yes correct, but web components support in react is not really there yet. That's why I'm currently still on the default react package
@fuma ts import 'swiper/css'; Does moving your css import to `page.tsx` work? And I've checked their docs, they seem to recommend migrating to Swiper Element instead.
Wesley JanseOP
And yes, I've tried page level, layout level, importing directly in the head as a style link. Nothing seems to "solve' it.
Amal
have you solve this issue?