Next.js中react-vertical-timeline-component报错原因及解决方法

这个错误是由于react-vertical-timeline-component@3.3.3内置的react-intersection-observer版本过旧，与你当前使用的React 18/Next.js 14环境不兼容导致的。旧版本的react-intersection-observer代码中尝试访问React.prototype，但在React 18的模块系统下该值为undefined，从而触发报错。此外，项目中同时安装了独立的react-intersection-observer@9.8.1，导致嵌套依赖与顶层依赖版本冲突，进一步加剧了兼容性问题。

以下是三种可行的修复方式，可根据你的需求选择：

1. 强制统一依赖版本 #

通过包管理器的版本覆盖功能，让react-vertical-timeline-component使用项目顶层安装的react-intersection-observer@9.8.1版本：

• npm 用户：在package.json中添加overrides字段：

  "overrides": {
    "react-vertical-timeline-component": {
      "react-intersection-observer": "$react-intersection-observer"
    }
  }
  

• Yarn 用户：在package.json中添加resolutions字段：

  "resolutions": {
    "react-vertical-timeline-component/react-intersection-observer": "^9.8.1"
  }
  

添加完成后，执行npm install或yarn install重新安装依赖。

2. 升级组件到兼容版本 #

将react-vertical-timeline-component升级到最新稳定版，新版本已更新内部依赖，适配React 18和Next.js 14：

npm install react-vertical-timeline-component@latest
# 或使用Yarn
yarn add react-vertical-timeline-component@latest

3. 禁用滚动检测功能 #

如果不需要组件的滚动可见性动画，可以直接禁用该功能，避免加载冲突的依赖：

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

export default function TimelinePage() {
  return (
    <VerticalTimeline disableScroll={true}>
      {/* 你的时间线元素 */}
      <VerticalTimelineElement
        icon={<div>Icon</div>}
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
      >
        <h3>示例条目</h3>
        <p>内容描述</p>
      </VerticalTimelineElement>
    </VerticalTimeline>
  );
}

内容的提问来源于stack exchange，提问作者chekirko