将AWS Transcribe流式麦克风代码迁移至React应用遇错误求助

问题背景 #

原本在自定义JS+Webpack环境中可正常运行的AWS Transcribe流式转录代码（基于官方示例的Microphone-stream实现），迁移到React应用后出现三类错误：

• TypeError: microphone_stream__WEBPACK_IMPORTED_MODULE_0___default(...).default is not a constructor
• ReferenceError: Buffer is not defined
• ReferenceError: process is not defined

逐个错误解决 #

1. MicrophoneStream构造函数导入错误 #

解决步骤：
React环境的ES模块导入逻辑与原示例的CommonJS导入不同，调整导入方式：

// 替换原require导入
import MicrophoneStream from 'microphone-stream';

// 若仍有问题，尝试显式获取default导出
import * as MicrophoneStreamModule from 'microphone-stream';
const MicrophoneStream = MicrophoneStreamModule.default;

2. Buffer未定义错误 #

解决步骤：
Buffer是Node.js核心API，浏览器环境默认不提供，需手动引入：

1. 安装依赖包：

npm install buffer

2. 在React入口文件（如index.js）中全局注册：

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

3. process未定义错误 #

解决步骤：
process是Node.js环境变量，浏览器中不存在，需手动配置：

1. 安装依赖包：

npm install process

2. 在入口文件中全局注册：

import process from 'process';
window.process = process;

3. 若使用Create React App，可在项目根目录创建.env文件添加配置：

NODE_ENV=development

额外注意事项 #

• 确保组件中已请求麦克风权限：

async function requestMicPermission() {
  try {
    await navigator.mediaDevices.getUserMedia({ audio: true });
  } catch (err) {
    console.error('麦克风权限被拒绝:', err);
  }
}

• 保持AWS SDK版本与原示例一致，推荐使用v3版本：

npm install @aws-sdk/client-transcribe-streaming @aws-sdk/util-utf8-node

内容的提问来源于stack exchange，提问作者Hamza Ali Khalid