nextjs app router prop id not match react chrono

Question

i created nextjs app with app router. and i have a page in app folder like app/about/page.jsx. i want to use react chrono library for timeline at that page.

so i created Timeline component at src/components/Timeline.

'use client'

import React from 'react'
import {Chrono} from 'react-chrono'

const Timeline = () => {
  const items = [
    {
      title: 'January 2022',
      cardTitle: 'Event 1',
      cardSubtitle: 'Event 1 Subtitle',
      cardDetailedText: 'This is the first event on the timeline.'
    },
    {
      title: 'February 2022',
      cardTitle: 'Event 2',
      cardSubtitle: 'Event 2 Subtitle',
      cardDetailedText: 'This is the second event on the timeline.'
    },
    {
      title: 'March 2022',
      cardTitle: 'Event 3',
      cardSubtitle: 'Event 3 Subtitle',
      cardDetailedText: 'This is the third event on the timeline.'
    }
  ]
  return (
    <Chrono
      mode="HORIZONTAL"
      items={items}
      showAllCardsHorizontal
      cardWidth={450}
      cardHeight={300}
      contentDetailsHeight={100}
      fontSizes={{
        title: '1rem'
      }}
      slideShow
      key={1}
    />
  )
}

and when i used in about page that component like ;

import Timeline from '@/components/Timeline'


export default function About() {
  return <Timeline />
}

i'm getting error like;

Warning: Prop `id` did not match. Server: "react-chrono-timeline-UECK0Np" Client: "react-chrono-timeline-BXPbvjM"

but if i import the timeline with next/dynamic with ssr false it working and i dont get error.

 const Timeline = dynamic(() => import('@/components/Timeline'), {ssr: false})

i think 'use client' and dynamic ssr false same things. where am i making the mistake, or is this the correct usage?

Answer 1

The warning "Prop id did not match. Server: ... Client: ..." is a common issue in Next.js applications, especially when using libraries like react-chrono that generate dynamic IDs. This happens due to the mismatch between server-side rendered markup and client-side rendered markup.

To resolve this, you can delay the rendering of the Chrono component until after the component has mounted, ensuring that it only renders on the client side. Here's a revised version of your component using the useEffect hook to control the rendering:

const [isClient, setIsClient] = useState(false);

      useEffect(() => {
        setIsClient(true); // Component has mounted, update state to trigger re-render   
}, []);

and then when returning :

{isClient && (
        <Chrono 
          items={items}
          mode="HORIZONTAL"
          theme={theme}
          // Other Chrono props as needed
        />
      )}