Does the react-vertical-timeline-component doesn't work in latest next.js?

[AbdurrofiiAssajid]

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { experiencesData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";
import { useTheme } from "@/context/theme-context";

export default function Experience() {
const { ref } = useSectionInView("Experience");
const { theme } = useTheme();

return (

My experience

{experiencesData.map((item, index) => (
<React.Fragment key={index}>
<VerticalTimelineElement
contentStyle={{
background:
theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
boxShadow: "none",
border: "1px solid rgba(0, 0, 0, 0.05)",
textAlign: "left",
padding: "1.3rem 2rem",
}}
contentArrowStyle={{
borderRight:
theme === "light"
? "0.4rem solid #9ca3af"
: "0.4rem solid rgba(255, 255, 255, 0.5)",
}}
date={item.date}
icon={item.icon}
iconStyle={{
background:
theme === "light" ? "white" : "rgba(255, 255, 255, 0.15)",
fontSize: "1.5rem",
}}
>

{item.title}

{item.location}

{item.description}

</React.Fragment>
))}

);
}

That's the code itself, please help me if you had the same issue, thank you

[AbdurrofiiAssajid]

and that's the appearance

[Shirshakkandel]

I have also faced this problem and it fixed when I use visible={true} in VerticalTimelineElement

[AbdurrofiiAssajid]

Yes,I’ve been done with it, but now the issue is the vertical timeline doesn’t have animation. Ao when I refresh the page, there is no animation at all, how can i solve this issue? Sel, 28 Nov 2023 pukul 20.17 Shirshakkandel ***@***.***> menulis:

…

image.png (view on web) <https://github.com/stephane-monnot/react-vertical-timeline/assets/64880594/b807bbb3-516e-4802-aacc-3c34e3f23dac> I have also faced this problem and it fixed when I use visible={true} in VerticalTimelineElement — Reply to this email directly, view it on GitHub <#171 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD6VY75E25RX6V3IREQF4ILYGXP6VAVCNFSM6AAAAAA72TTGU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRZHAZDGMRUHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Shirshakkandel]

Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view.

`
//lib\hooks.ts
import { useEffect } from "react";
import { useInView } from "react-intersection-observer";

import { useActiveSectionContext } from "@/context/active-section-context";
import type { SectionName } from "./types";

export function useSectionInView(sectionName: SectionName, threshold = 0.5) {
const { ref, inView } = useInView({
threshold: 0.5,
});
const { setActiveSection, timeOfLastClick } = useActiveSectionContext();

useEffect(() => {
if (inView && Date.now() - timeOfLastClick > 1000) {
setActiveSection(sectionName);
}
}, [inView, setActiveSection]);
return {
ref,
inView,
};
}
`

[AbdurrofiiAssajid]

Thanks so much, Appreciate it bro Sel, 28 Nov 2023 pukul 20.39 Shirshakkandel ***@***.***> menulis:

…

image.png (view on web) <https://github.com/stephane-monnot/react-vertical-timeline/assets/64880594/cbd3be56-8772-4efb-b977-3e1b2d704a49> Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view. — Reply to this email directly, view it on GitHub <#171 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD6VY7ZJBKBU3HEIP7IFQ3TYGXSQDAVCNFSM6AAAAAA72TTGU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRZHA3DMOBWHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AbdurrofiiAssajid]

Do we only could host once (for free) in vercel like in github , or we could host it all the time we need? Sel, 28 Nov 2023 pukul 20.39 Shirshakkandel ***@***.***> menulis:

…

image.png (view on web) <https://github.com/stephane-monnot/react-vertical-timeline/assets/64880594/cbd3be56-8772-4efb-b977-3e1b2d704a49> Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view. — Reply to this email directly, view it on GitHub <#171 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD6VY7ZJBKBU3HEIP7IFQ3TYGXSQDAVCNFSM6AAAAAA72TTGU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRZHA3DMOBWHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[kolen44]

Hello everyone And I have most likely found a solution to this problem!!!!! If you use a typescript, then this comment is for you! Since a javascript is used in the react-vertical-timeline-component folder, and you import a javascript into a typescript, you naturally get an error! Therefore, either you need to recreate the project and use the javascript there, or use other typescript-compatible libraries!

[gideonler]

I noticed that the line color also does not show up until another small change is made and then the line appears momentarily. Anyone faced a similar issue?

[kolen44]

I noticed that the line color also does not show up until another small change shows up and then it shows up momentarily. Anyone faced a similar issue?

check z-index in css, and send me a file in github if you don't figure it out, I'll try to help

[flip-in]

It needs to be updated to be compatible with Next.js v14.. Downgrading to next.js 13.4.8 and the animations work as expected

[flip-in]

Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view.

` //lib\hooks.ts import { useEffect } from "react"; import { useInView } from "react-intersection-observer";

import { useActiveSectionContext } from "@/context/active-section-context"; import type { SectionName } from "./types";

export function useSectionInView(sectionName: SectionName, threshold = 0.5) { const { ref, inView } = useInView({ threshold: 0.5, }); const { setActiveSection, timeOfLastClick } = useActiveSectionContext();

useEffect(() => { if (inView && Date.now() - timeOfLastClick > 1000) { setActiveSection(sectionName); } }, [inView, setActiveSection]); return { ref, inView, }; } `

This works, but I found that if I navigate away from that section, the timeline is no longer visible. How to make the animation play only once with this implementation?

[jeromeSH26]

with nextjs14, got also a warning in the console :
app-index.js:34 Warning: Extra attributes from the server: style

this comes as soon as you add a in your page (client site)

seems some code as to be reviewed to be full compliant with Nextjs14. Unfortunatly

[S3annnyyy]

@jeromeSH26 an easy fix for this would be to parse in additional prop in your VerticalTimeline element like so:

<VerticalTimeline lineColor="">

And set --line-color under global.css like so:

html {
    --line-color: #fff;
}

This would remove the warning

[IhtishamRiaz]

with nextjs14, got also a warning in the console : app-index.js:34 Warning: Extra attributes from the server: style

this comes as soon as you add a in your page (client site)

seems some code as to be reviewed to be full compliant with Nextjs14. Unfortunatly

with nextjs14, got also a warning in the console : app-index.js:34 Warning: Extra attributes from the server: style

this comes as soon as you add a in your page (client site)

seems some code as to be reviewed to be full compliant with Nextjs14. Unfortunatly

This warning message indicates that there are some extra attributes on the HTML element that Next.js received from the server that it does not recognize. These attributes are added by various browser extensions, plugins, or toolbars that modify the HTML of the page.

This is usually caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI, this creates a mismatch between what was rendered on the server and what is rendered on the client.

In your case, the attributes data-new-gr-c-s-check-loaded, data-gr-ext-installed, and cz-shortcut-listen are likely being added by one or more browser extensions that are installed in your browser. These attributes are not recognized by Next.js, which is why it is warning you about them.

You can suppress hydration warnings by setting suppressHydrationWarning to true in the opening tag in which these attributes are being added:

[ericdwkim]

@Shirshakkandel Thank you! I was having an odd issue where my dev server instance wasn't showing my vertical-timeline-element elements, but in my vercel deployed instance of the same codebase was and couldn't figure it out until I tried visible={true} and it fixed it like a charm. Still have no idea how my vercel deployment showed these elements though.

[Nanashi-101]

Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view.

` //lib\hooks.ts import { useEffect } from "react"; import { useInView } from "react-intersection-observer";

import { useActiveSectionContext } from "@/context/active-section-context"; import type { SectionName } from "./types";

export function useSectionInView(sectionName: SectionName, threshold = 0.5) { const { ref, inView } = useInView({ threshold: 0.5, }); const { setActiveSection, timeOfLastClick } = useActiveSectionContext();

useEffect(() => { if (inView && Date.now() - timeOfLastClick > 1000) { setActiveSection(sectionName); } }, [inView, setActiveSection]); return { ref, inView, }; } `

Bro Me and You, We are following the same tutorial from ByteGrad💀

[jacocanete]

Yes, i have seen it and fixed it by using inView which is true only when the experience section is in view.
//lib\hooks.ts import { useEffect } from "react"; import { useInView } from "react-intersection-observer"; import { useActiveSectionContext } from "@/context/active-section-context"; import type { SectionName } from "./types"; export function useSectionInView(sectionName: SectionName, threshold = 0.5) { const { ref, inView } = useInView({ threshold: 0.5, }); const { setActiveSection, timeOfLastClick } = useActiveSectionContext(); useEffect(() => { if (inView && Date.now() - timeOfLastClick > 1000) { setActiveSection(sectionName); } }, [inView, setActiveSection]); return { ref, inView, }; }

This works, but I found that if I navigate away from that section, the timeline is no longer visible. How to make the animation play only once with this implementation?

Hey dude there are more elegant ways around this but here is what I came up with:

const [hasAnimated, setHasAnimated] = useState(false);

useEffect(() => { if (inView && !hasAnimated) { setHasAnimated(true); } }, [inView]);

visible={hasAnimated ? true : inView}

[Dikshant441]

I also faced the same error recently. What I did ? :

I reinstalled the package by running npm i react-vertical-timeline-component.
I added the following code:

My experience {experiencesData.map((item, index) => ( visible={true} <------ // will show your data contentStyle={{ boxShadow: "none",

[codewithroby]

I did a small workaround to fix this problem and keep the cool animation, take a look at my code if you wish :) hope it helps!

https://github.com/roby-codes/robert-kovacs-portfolio/blob/master/src/components/experience.tsx
https://github.com/roby-codes/robert-kovacs-portfolio/blob/master/src/components/vertical-element.tsx

[ryangandev]

If you don't want to downgrade your next.js version and you're seeing the typescript error, you could bypass the error for deployment by giving the component an 'any' type as a temporary solution:

[darshan45672]

I'm using vertical-timeline-component for my next.js 14 portfolio site

the image for the icon is not fitting into the icon, i'm getting it as

help me to fix this.

import React from "react";
import styled from "styled-components";
import { VerticalTimelineElement } from "react-vertical-timeline-component";

const Top = styled.divwidth: 100%; display: flex; max-width: 100%; gap: 12px;;
const Image = styled.img`
height: 50px;
border-radius: 10px;
margin-top: 4px;

@media only screen and (max-width: 768px) {
height: 40px;
}
; const Body = styled.div
width: 100%;
display: flex;
flex-direction: column;
`;

const Name = styled.div`
font-size: 18px;
font-weight: 600px;
color: ${({ theme }) => theme.text_primary + 99};

@media only screen and (max-width: 768px) {
font-size: 14px;
}
; const Degree = styled.div
font-size: 14px;
font-weight: 500px;
color: ${({ theme }) => theme.text_secondary + 99};

@media only screen and (max-width: 768px) {
font-size: 12px;
}
; const Date = styled.div
font-size: 12px;
font-weight: 400px;
color: ${({ theme }) => theme.text_secondary + 80};

@media only screen and (max-width: 768px) {
font-size: 10px;
}
; const Grade = styled.div
font-size: 14px;
font-weight: 500;
color: ${({ theme }) => theme.text_secondary + 99};
@media only screen and (max-width: 768px) {
font-size: 12px;
}
`;

const Description = styled.divwidth: 100%; font-size: 15px; font-weight: 400; color: ${({ theme }) => theme.text_primary + 99}; margin-bottom: 10px; @media only screen and (max-width: 768px) { font-size: 12px; };
const Span = styled.div``;

const EducationCard = ( {education}: {education: any} ) => {
return (
<VerticalTimelineElement
visible={true}
icon={

}
contentStyle={{
display: "flex",
flexDirection: "column",
gap: "12px",
background: "#1d1836",
color: "#fff",
boxShadow: "rgba(23, 92, 230, 0.15) 0px 4px 24px",
backgroundColor: "rgba(17, 25, 40, 0.83)",
border: "1px solid rgba(255, 255, 255, 0.125)",
borderRadius: "6px",
}}
contentArrowStyle={{
borderRight: "7px solid rgba(255, 255, 255, 0.3)",
}}
date={education.date}
>



{education.school}
{education.degree}
{education.date}



Grade :
{education.grade}


{education.desc}


);
}

export default EducationCard

[EduartePaiva]

Hello guys, for people who are doing the portfolio project from ByteGrad or want to use this pkg with nextjs 14.2.5 I solved it by copy pasting the components into my own project and using the latest dependencies versions of ("react-intersection-observer": "^9.13.0") and ("classnames": "^2.5.1"), after doing that and fixing type issues with typescript I could use it normally without any extra code. I created a folder in components and put everything related to this pkg there:

Then in the project I'm using it normally.

"use client";

import SectionHeading from "./section-heading";
import { experiencesData } from "@/lib/data";
import { Fragment } from "react";
import { useActiveSectionInView } from "@/lib/hooks";
import VerticalTimeline from "./VerticalTimeline/VerticalTimeline";
import VerticalTimelineElement from "./VerticalTimeline/VerticalTimelineElement";

export default function Experience() {
    const { ref } = useActiveSectionInView("Experience", 0.4);

    return (
        <section ref={ref} id="experience">
            <SectionHeading>My experience</SectionHeading>
            <VerticalTimeline lineColor="">
                {experiencesData.map((item, index) => (
                    <Fragment key={index}>
                        <VerticalTimelineElement
                            contentStyle={{
                                background: "#f3f4f6",
                                boxShadow: "none",
                                border: "1px solid rgba(0,0,0,0.05)",
                                textAlign: "left",
                                padding: "1.3rem 2rem",
                            }}
                            contentArrowStyle={{
                                borderRight: "0.4rem solid #9ca3af",
                            }}
                            date={item.date}
                            icon={item.icon}
                            iconStyle={{
                                background: "white",
                                fontSize: "1.5rem",
                            }}
                        >
                            <h3 className="font-semibold capitalize">
                                {item.title}
                            </h3>
                            <p className="font-normal !mt-0">{item.location}</p>
                            <p className="!mt-1 !font-normal text--gray-700">
                                {item.description}
                            </p>
                        </VerticalTimelineElement>
                    </Fragment>
                ))}
            </VerticalTimeline>
        </section>
    );
}

If someone is interested, just check out the code on my portfolio repo.
Unfortunately I don't know how to contribute to fix this issue but from my understanding probably updating react-intersection-observer to version 9 could solve it.