NextJS使用dotLottie Player加载.lottie文件解析失败求助

这个错误是因为Webpack默认没有配置处理.lottie二进制文件的规则，需要手动添加对应的资源处理配置，以下是两种可行的解决方案：

方案一：通过Webpack配置处理.lottie文件 #

1. 修改next.config.js，添加Webpack规则来识别并处理.lottie文件（适用于NextJS 12+，基于Webpack 5）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加.lottie文件的处理规则
    config.module.rules.push({
      test: /\.lottie$/,
      type: 'asset/resource',
      generator: {
        // 指定输出路径，可根据需求调整
        filename: 'static/images/[name].[hash][ext]'
      }
    });
    return config;
  },
};

module.exports = nextConfig;

2. 更新global.d.ts的模块声明，确保TypeScript能正确识别导入的.lottie文件类型：

declare module "*.lottie" {
  const src: string; // 导入的是文件的URL字符串
  export default src;
}

declare namespace JSX {
  interface IntrinsicElements {
    "dotlottie-player": any;
  }
}

3. 保持组件中的导入和使用代码不变，重启开发服务即可生效。

方案二：直接使用Public目录路径（更简单） #

由于放在public目录下的文件可以直接通过URL访问，你可以跳过import步骤，直接在组件中使用相对路径：

<dotlottie-player
  src="/images/SampleLottie.lottie"
  autoplay
  loop
/>

这种方式不需要修改Webpack配置，只保留global.d.ts中的JSX接口声明即可。

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