在React应用中使用AWS Translate遇Node polyfills问题求助

AWS SDK v3确实支持浏览器/React客户端环境，但Webpack 5不再默认提供Node.js核心模块的polyfill，这就是你遇到大量编译错误的原因。直接禁用模块或盲目使用polyfill插件会导致运行时错误，以下是正确的解决步骤：

1. 安装必要的浏览器兼容polyfill包 #

不要把所有Node模块都设为false，只禁用浏览器完全用不上的模块（如fs、child_process），其余安装对应的浏览器替代包：

npm install util buffer process stream-browserify crypto-browserify path-browserify os-browserify stream-http https-browserify

2. 配置Webpack的resolve.fallback和全局变量注入 #

修改你的Webpack配置文件，补充缺失的polyfill并注入process、Buffer等全局变量（SDK内部依赖这些）：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  resolve: {
    fallback: {
      "util": require.resolve("util/"),
      "buffer": require.resolve("buffer/"),
      "process": require.resolve("process/browser"),
      "stream": require.resolve("stream-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      // 浏览器环境完全不需要的模块直接禁用
      "fs": false,
      "child_process": false,
      "http2": false
    }
  },
  plugins: [
    // 注入全局变量，避免SDK找不到依赖
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

3. 修正AWS Translate客户端的初始化方式 #

你遇到的fs_1.promises错误，大概率是因为SDK尝试读取本地文件（比如Node环境下的凭证文件），浏览器环境不支持这种操作。必须使用浏览器兼容的认证方式，比如Cognito身份池凭证或前端安全的临时凭证：

import { TranslateClient, TranslateTextCommand } from '@aws-sdk/client-translate';

// 正确的客户端初始化（浏览器环境）
const translateClient = new TranslateClient({
  region: 'us-east-1', // 替换为你的AWS区域
  credentials: {
    // 这里使用Cognito身份池获取的临时凭证，绝对不能硬编码永久AK/SK
    accessKeyId: '临时Access Key',
    secretAccessKey: '临时Secret Key',
    sessionToken: '临时Session Token'
  }
});

// 调用翻译示例
const translateText = async (text, targetLang) => {
  const command = new TranslateTextCommand({
    Text: text,
    SourceLanguageCode: 'auto',
    TargetLanguageCode: targetLang
  });
  const response = await translateClient.send(command);
  return response.TranslatedText;
};

4. Create React App（CRA）用户的特殊处理 #

CRA默认不允许直接修改Webpack配置，你可以用craco或react-app-rewired覆盖配置：

1. 安装craco：npm install @craco/craco
2. 在项目根目录创建craco.config.js，内容同上述Webpack配置的修改部分
3. 修改package.json中的启动脚本，把react-scripts替换为craco：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

为什么之前的方案失效？ #

• 直接把必要模块设为false会导致SDK运行时找不到依赖的API，引发报错
• node-polyfill-webpack-plugin会尝试polyfill所有Node模块，但有些模块（如fs）在浏览器中根本无法使用，反而会残留错误

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