Vite+React项目导入zlib包出现解析错误，求解决方案

问题原因 #

zlib是Node.js的内置模块，create-react-app（CRA）的Webpack配置默认会给浏览器环境自动polyfill这类Node.js内置模块，所以旧项目能正常使用。但Vite基于esbuild，为了性能默认不处理Node.js内置模块的浏览器兼容，因此会出现找不到./zlib_bindings的错误。

解决办法 #

情况1：浏览器环境下使用zlib功能（绝大多数前端场景） #

直接用浏览器兼容的zlib替代库pako，它是专门为浏览器设计的压缩/解压缩工具，API和Node.js的zlib基本一致：

• 安装依赖：

  npm install pako
  

• 替换原有导入代码：
  把原来的

  const { gunzipSync } = require('zlib')
  // 或者 import { gunzipSync } from 'zlib'
  

  换成

  import { gunzipSync } from 'pako'
  

  用法和原来完全一致，比如解压缩数据：

  const decompressedData = gunzipSync(compressedBuffer)
  

情况2：Node.js端使用（比如SSR、后端API场景） #

如果是在Node.js环境下运行的代码（比如Vite SSR的服务端逻辑），可以通过配置Vite识别Node.js内置模块：

1. 修改vite.config.js，添加resolve别名和依赖优化配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         zlib: 'node:zlib' // 明确指向Node.js内置的zlib模块
       }
     },
     optimizeDeps: {
       include: ['zlib'] // 告诉Vite预优化这个模块
     }
   })
   

2. 如果还是存在解析问题，可以安装rollup-plugin-node-polyfills来处理：
   • 安装依赖：

     npm install rollup-plugin-node-polyfills --save-dev
     

   • 修改vite.config.js添加插件：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     import nodePolyfills from 'rollup-plugin-node-polyfills'
     
     export default defineConfig({
       plugins: [
         react(),
         nodePolyfills({
           include: ['zlib'] // 指定只polyfill zlib模块
         })
       ],
       resolve: {
         alias: {
           zlib: 'node:zlib'
         }
       }
     })
     

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