search

stephane-monnot / react-vertical-timeline

Vertical timeline for React.js
https://stephane-monnot.github.io/react-vertical-timeline/
MIT License
1.07k stars 158 forks source link

Error in Next 14 with typescript #181

Open gino23odar opened 3 weeks ago

gino23odar commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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

mayconviniciusdev commented 2 weeks ago

`'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!