Error in Next 14 with typescript

[gino23odar]

Even after installing the @types/react-vertical-timeline-component, next keeps running into the following error:
⨯ TypeError: Cannot read properties of undefined (reading 'prototype') at __webpack_require__ (C:\Users\xxx\Documents\yyy\Personal-Projects\portfolio\.next\server\webpack-runtime.js:33:42) at __webpack_require__ (C:\Users\xxx\Documents\yyy\Personal-Projects\portfolio\.next\server\webpack-runtime.js:33:42) at __webpack_require__ (C:\Users\xxx\Documents\yyy\Personal-Projects\portfolio\.next\server\webpack-runtime.js:33:42) at eval (./src/slices/EducationandExperience/index.tsx:11:91) at (rsc)/./src/slices/EducationandExperience/index.tsx (C:\Users\xxx\Documents\yyy\Personal-Projects\portfolio\.next\server\_rsc_src_slices_EducationandExperience_index_tsx.js:68:1) at Function.__webpack_require__ (C:\Users\xxx\Documents\yyy\Personal-Projects\portfolio\.next\server\webpack-runtime.js:33:42) digest: "1293258541"

these are my dependencies:
"dependencies": { "@gsap/react": "^2.1.1", "@prismicio/client": "^7.8.0", "@prismicio/next": "^1.6.0", "@prismicio/react": "^2.8.0", "@react-three/drei": "^9.109.5", "@react-three/fiber": "^8.17.5", "@types/react-vertical-timeline-component": "^3.3.6", "clsx": "^2.1.1", "gsap": "^3.12.5", "next": "14.2.5", "react": "^18", "react-countup": "^6.5.3", "react-dom": "^18", "react-icons": "^5.2.1", "react-scroll-trigger": "^0.6.14", "react-vertical-timeline-component": "^3.6.0", "three": "^0.167.1", "ts-jest": "^29.2.3" },

[Akshatt10]

try to load the react-vertical-timeline-component component conditionally on the client-side.
or update NextJs and related packages..
npm update next react react-dom

tell if it helps

[weixinnnn]

Add "use client" at the top of the component file

[mayconviniciusdev]

`'use client'
import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';

const VerticalTimeline = dynamic(() => import('react-vertical-timeline-component').then(mod => mod.VerticalTimeline), { ssr: false });
const VerticalTimelineElement = dynamic(() => import('react-vertical-timeline-component').then(mod => mod.VerticalTimelineElement), { ssr: false });

export const About = () => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {setIsMounted(true);}, []);
if (!isMounted) {return null; }

return (....);}`

Cara, estava com o mesmo problema que você e o código cima resolveu meu problema parcialmente. Pois, após isso, deve-se colocar o 'visible={true} em todos os VerticalTimelineElement que existe, sem isso há um problema de visualização ao dar refresh na página ou precisar fazer alguma alteração no código.

Ah e eu inseri o 'react-vertical-timeline-component/style.min.css' no arquivo layout.tsx na primeira linha.
Aparentemente deu certo, quero ver ao fazer deploy como isso vai se comportar. Espero ter ajudado, abraços!