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?

Ayoub Ghaninou · Accepted Answer · 2024-06-08 18:42:50Z

0

Try to add a condition checking if isClient is defined before returning the Chrono component:

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

      useEffect(() => {
        setIsClient(true);   
}, []);

and then when returning :

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

edited Jun 8, 2024 at 18:42

answered Jan 4, 2024 at 16:02

Ayoub Ghaninou

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Mole Over a year ago

meta.stackoverflow.com/q/421831/10871073

Collectives™ on Stack Overflow

nextjs app router prop id not match react chrono

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related