react-lottie v1.2.3动画不显示求助：已试animationData.default仍无效

我之前也碰到过类似的情况——编译完全没报错，但动画就是死活不出来，给你几个排查和解决的思路：

• 先确认动画数据的导入是否正确
  不同打包工具对JSON文件的导入处理有差异，你可以先在组件里打印一下animationData，看看实际拿到的是什么：

  import animationData from './lottie/lottie_page_not_found.json';
  console.log('animationData:', animationData); // 查看控制台输出
  

  如果打印结果是带default属性的模块对象，那用animationData.default才对；如果直接就是Lottie需要的JSON结构，那直接用animationData即可。要是打印出来是undefined，那大概率是文件路径写错了，仔细检查下./lottie/lottie_page_not_found.json这个路径是否正确。

• 试试用require导入JSON文件
  有些老版本的Webpack配置下，import JSON可能会有奇怪的问题，换成require试试：

  const animationData = require('./lottie/lottie_page_not_found.json');
  // 之后在options里直接使用animationData即可
  

• 检查react-lottie与React版本的兼容性
  v1.2.3是比较老的版本了，如果你的项目用的是React 17+，可能存在兼容问题。可以暂时升级react-lottie到最新维护版本（比如v1.2.6）试试，如果升级后动画能正常显示，那就是版本兼容的锅。要是必须用v1.2.3，记得核对项目里的React版本是否符合这个库的要求。

• 验证动画JSON文件本身是否有效
  把你的lottie_page_not_found.json内容复制到Lottie的在线预览工具里，看看动画能不能正常播放。如果预览不了，那就是JSON文件本身有问题——可能是下载时损坏，或者格式不符合Lottie规范。

• 检查组件容器的样式
  有时候动画不显示是因为容器没有足够的渲染空间，你可以给外层div加个样式，确保Lottie组件能被正确展示：

  return(
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h1>Page Not Found</h1>
      <Lottie options={defaultOptions} height={400} width={400} />
    </div>
  );
  

你可以按照上面的步骤逐一排查，应该能找到问题所在。

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