React中如何反序列化Avro文件？avsc包报错createFileDecoder不是函数怎么解决

DevOps 小满

2026-9-27

问题原因

avro.createFileDecoder 是 avsc 针对 Node.js 运行环境提供的文件系统专属API，依赖Node.js原生的fs文件操作模块。React项目默认运行在浏览器端，浏览器环境没有对应的文件系统底层能力，因此avsc的浏览器构建版本没有内置这个方法，直接调用就会抛出类型错误。

解决方案

场景1：React浏览器端解析用户上传的Avro文件

你需要先拿到Avro文件的ArrayBuffer格式内容，再调用avsc的通用解析方法处理，示例代码如下：

import avro from 'avsc';

// 以input上传组件获取文件为例
const handleFileUpload = async (e) => {
  const file = e.target.files[0];
  // 读取文件为ArrayBuffer
  const buffer = await file.arrayBuffer();
  // 初始化Avro文件块解析器
  const decoder = new avro.streams.BlockDecoder();
  // 解码二进制内容
  decoder.on('data', (record) => {
    console.log('解析到的记录：', record);
  });
  decoder.on('end', () => {
    console.log('所有记录解析完成');
  });
  // 写入二进制数据触发解析
  decoder.write(Buffer.from(buffer));
  decoder.end();
}

场景2：在Next.js等支持服务端运行的React框架的服务端逻辑中使用

你需要确认代码是运行在Node.js服务端侧（比如getServerSideProps、服务端组件内），此时需要导入avsc的Node.js专属入口：

// 仅在服务端运行的代码中导入
const avro = require('avsc/lib/node');
// 后续可以正常调用createFileDecoder
avro.createFileDecoder('./abc.avro').on('data', (record) => { console.log(record) });

注意事项