React中使用zlib.gzip等方法出现Buffer.isBuffer() is not a function错误求助

问题描述 #

在React.js项目中使用zlib库的zlib.gzip()方法对流进行gzip压缩，该功能数月前运行正常，但近期调用时出现错误：

TypeError: Buffer.isBuffer is not a function

且gunzip、inflate、deflate方法也出现相同错误。当前环境：

• Node.js 14版本
• zlib版本为1.0.5

错误栈信息：

TypeError: Buffer.isBuffer is not a function
at _isUint8Array (http://localhost:5000/main.bundle.js:488941:17)
at Gzip../node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_writable.js.Writable.write (http://localhost:5000/main.bundle.js:489169:36)
at Gzip../node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_writable.js.Writable.end (http://localhost:5000/main.bundle.js:489437:51)
at zlibBuffer (http://localhost:5000/main.bundle.js:298272:10)
at Object../node_modules/browserify-zlib/lib/index.js.exports.gzip (http://localhost:5000/main.bundle.js:298198:10)
at Object.onClick (http://localhost:5000/main.bundle.js:68477:14)
at Button.onClick (http://localhost:5000/main.bundle.js:464007:25)
at Button.onClick (http://localhost:5000/main.bundle.js:437509:25)
at HTMLUnknownElement.callCallback (http://localhost:5000/main.bundle.js:412829:14)
at Object.invokeGuardedCallbackDev (http://localhost:5000/main.bundle.js:412878:16)

解决方案 #

• 补全Buffer polyfill
  浏览器环境默认没有Node.js的Buffer对象，browserify-zlib依赖该对象运行。先安装依赖：

  npm install buffer
  

  在React项目入口文件（如src/index.js）顶部添加全局声明：

  import { Buffer } from 'buffer';
  window.Buffer = Buffer;
  

• 升级zlib相关依赖
  当前使用的zlib@1.0.5版本较旧，和Node.js 14存在兼容性风险，执行升级命令：

  npm update browserify-zlib
  

  注：npm上的zlib包是browserify-zlib的别名，直接更新后者更准确。

• 修复打包工具配置
  如果近期修改过Webpack配置，可能导致Node.js核心模块polyfill缺失。在Webpack配置文件中添加resolve fallback：

  module.exports = {
    // ...其他配置
    resolve: {
      fallback: {
        buffer: require.resolve('buffer/'),
        stream: require.resolve('stream-browserify')
      }
    }
  };
  

  同时安装缺失的流依赖：

  npm install stream-browserify
  

• 排查代码冲突
  创建最小测试组件，排除其他代码干扰，确认问题来源：

  import { gzip } from 'zlib';
  import { Buffer } from 'buffer';
  
  const TestGzip = () => {
    const handleGzip = () => {
      const data = Buffer.from('test data');
      gzip(data, (err, result) => {
        if (err) console.error(err);
        else console.log('Gzip result:', result);
      });
    };
  
    return <button onClick={handleGzip}>Test Gzip</button>;
  };
  
  export default TestGzip;
  

  若测试组件正常运行，说明原有代码存在数据流处理或依赖冲突问题，需进一步排查。

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