React项目使用zlib提示缺失zlib_bindings模块如何解决

模块缺失报错修复方案 #

根据你的实际使用场景选对应方案即可：

• 如果是前端React代码需要实现gzip/deflate等zlib相关的压缩、解压能力：
  1. 先卸载无用的废弃zlib包，执行命令：npm uninstall zlib
  2. 安装支持浏览器环境的zlib兼容实现包pako，执行命令：npm install pako，该包API和Node内置zlib基本对齐，可直接在React代码中引入使用。
• 如果是误将Node端逻辑写到了前端运行时代码中：
  把涉及zlib调用的逻辑从React组件、前端运行时代码中移除，迁移到Node服务端、构建脚本等Node环境下执行，浏览器运行时本身不提供Node原生模块能力。
• 如果确实需要在前端环境polyfill Node.js的zlib模块：
  卸载原有废弃zlib包后安装browserify-zlib，通过craco或react-app-rewired修改webpack配置，将模块解析规则中zlib的别名指向browserify-zlib即可。该方案会增加前端打包产物体积，非必要不推荐使用。

为什么直接执行node test.js时zlib可以正常运行？ #

Node.js 自带内置的zlib核心模块，无需额外npm安装。Node执行脚本时的模块解析规则会优先加载内置核心模块，执行require('zlib')时根本不会读取node_modules目录下你手动安装的第三方zlib包，自然不会触发缺失文件的报错。

你通过npm安装的zlib是早已停止维护的第三方废弃包，本身依赖需要本地编译的zlib_bindings二进制模块，且完全不支持浏览器端运行环境。而create-react-app的启动打包流程是面向浏览器环境构建，不会内置Node.js核心模块，打包时会解析到node_modules下的第三方zlib包，就会触发找不到对应依赖文件的错误。

内容的提问来源于stack exchange，提问作者THX-1138