React项目使用react-vertical-timeline-component遇多版本/旧元素渲染错误

1. 检查并统一React依赖版本 #

• 运行 npm list react react-dom 或 yarn list react react-dom，查看项目内是否存在多版本React包。
• 若发现多版本，删除 node_modules 和 package-lock.json/yarn.lock，重新执行 npm install 或 yarn install。
• 确保 package.json 中 react 和 react-dom 的版本完全一致，比如都指定为 ^18.2.0 这类明确的版本范围。

2. 强制统一第三方库的React版本 #

• 执行 npm ls react 排查 react-vertical-timeline-component 的依赖树，确认是否有子依赖自带旧版本React。
• 若存在此类情况，通过包管理器的版本强制功能统一：
  • npm（v8.3及以上）：在 package.json 中添加以下配置：

    "overrides": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
    

  • yarn：在 package.json 中添加：

    "resolutions": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
    

• 配置完成后重新安装依赖。

3. 确认JSX编译使用运行时模式 #

• 检查项目编译配置：
  • 使用Create React App的话，确保项目为较新版本（默认已启用JSX运行时）；若手动修改过babel配置，确认 @babel/preset-react 的 runtime 设为 automatic：

    "presets": [
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
    

  • 使用Vite的话，vite.config.js 中确保 @vitejs/plugin-react 保持默认配置（默认启用JSX运行时），配置示例：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()]
    })
    

• 重启开发服务器，验证编译模式是否正确。

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