在Vercel/Netlify部署React App遇react-lottie依赖错误求助

完全可以在React App中使用LottieFiles，你遇到的npm ERR! While resolving: react-lottie@1.2.3错误是react-lottie这个第三方包的依赖兼容性问题，和LottieFiles本身无关。

以下是具体解决办法：

1. 替换为官方维护的Lottie React库（推荐） #

react-lottie包最后更新是2019年，已停止维护，存在与新版React的兼容问题。建议切换到LottieFiles官方推出的库：

• 卸载旧包：

  npm uninstall react-lottie
  

• 安装官方包：

  npm install @lottiefiles/react-lottie-player
  

• 基础使用示例：

  import { Player } from '@lottiefiles/react-lottie-player';
  
  function LottieAnimation() {
    return (
      <Player
        src="https://assets3.lottiefiles.com/packages/lf20_9j0c8w.json"
        autoplay
        loop
        style={{ height: '300px', width: '300px' }}
      />
    );
  }
  
  export default LottieAnimation;
  

2. 若坚持使用react-lottie，修复依赖冲突 #

如果必须保留react-lottie@1.2.3，可以通过npm overrides强制指定兼容的依赖版本：

• 在package.json中添加以下配置（根据你的React版本调整）：

  "overrides": {
    "react-lottie": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  }
  

• 清理并重新安装依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

3. 部署前的缓存清理 #

部署到Vercel/Netlify前，确保本地清理了缓存和旧依赖：

• 执行以下命令：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 重新提交代码后再触发部署。

内容的提问来源于stack exchange，提问作者Ayush Pratap Singh