使用React-S3实现S3文件上传时报Buffer is not defined错误如何解决

该报错的核心原因是Buffer是Node.js原生内置的API，浏览器运行环境默认没有提供该全局对象，而react-s3库的底层实现依赖了Buffer，因此在前端React项目中运行时会抛出该异常。

不同构建工具的具体修复步骤 #

基于Vite构建的项目 #

• 第一步：安装Buffer polyfill依赖

npm install buffer --save

• 第二步：修改vite.config.js/vite.config.ts配置文件，添加全局兼容配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    global: "window",
    "process.env": {}
  },
  resolve: {
    alias: {
      buffer: "buffer"
    }
  }
})

• 第三步：在项目入口文件（通常为main.jsx/main.tsx）最顶部挂载Buffer到全局window对象：

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

基于Create React App（CRA）构建的项目 #

• 第一步：安装所需依赖

npm install react-app-rewired buffer --save

• 第二步：在项目根目录新建config-overrides.js文件，添加webpack兼容配置：

const webpack = require("webpack");

module.exports = function override(config) {
  // 配置buffer fallback
  config.resolve.fallback = {
    ...config.resolve.fallback,
    buffer: require.resolve("buffer/")
  };
  // 全局注入Buffer
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"]
    }),
    new webpack.DefinePlugin({
      "process.env": {},
      global: "window"
    })
  );
  return config;
};

• 第三步：修改package.json中的scripts字段，将react-scripts替换为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

免配置替代方案 #

如果不想修改项目构建配置，可以选择以下两种方式规避该问题：

• 换用AWS官方前端SDK @aws-sdk/client-s3 实现上传，该SDK针对浏览器环境做了兼容，不会依赖Node.js专属API
• 后端生成S3预签名上传URL，前端直接通过原生fetch/axios把文件上传到预签名地址，不需要引入任何第三方S3相关依赖

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