Vite构建React部署后出现Uncaught TypeError: e is not a constructor（AWS SDK导致）

问题原因 #

该错误源于AWS SDK v2基于CommonJS编写，Vite生产构建时的模块解析或tree-shaking逻辑导致S3构造函数未被正确引入——本地开发时Vite对CommonJS的兼容处理更宽松，因此不会触发报错。

解决方案 #

1. 升级到AWS SDK for JavaScript v3（推荐方案） #

AWS SDK v3采用模块化设计，适配Vite等现代前端构建工具，体积更小且能规避CommonJS相关打包问题。

• 安装依赖：

npm install @aws-sdk/client-s3

• 修改S3实例初始化代码：

import { S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  credentials: {
    accessKeyId: import.meta.env.VITE_ACCESS_KEY_ID,
    secretAccessKey: import.meta.env.VITE_SECRET_ACCESS_KEY,
  },
  region: import.meta.env.VITE_REGION,
});

后续调用S3接口需使用对应Command对象，示例：

import { PutObjectCommand } from "@aws-sdk/client-s3";

const uploadFile = async (file, bucketName, key) => {
  const command = new PutObjectCommand({
    Bucket: bucketName,
    Key: key,
    Body: file,
  });
  await s3Client.send(command);
};

2. 修复Vite对AWS SDK v2的打包配置 #

若暂时不想升级，可通过Vite配置强制兼容AWS SDK v2：

• 在vite.config.js中添加配置：

export default {
  optimizeDeps: {
    include: ['aws-sdk'],
  },
  build: {
    commonjsOptions: {
      include: [/aws-sdk/, /node_modules/],
    },
  },
};

或直接引入S3专属客户端模块，避免全量引入：

// 替换原有的import AWS from 'aws-sdk'写法
const S3 = require('aws-sdk/clients/s3');

const s3 = new S3({
  accessKeyId: import.meta.env.VITE_ACCESS_KEY_ID,
  secretAccessKey: import.meta.env.VITE_SECRET_ACCESS_KEY,
  region: import.meta.env.VITE_REGION,
});

3. 关键安全提示 #

绝对不要在前端代码中直接暴露AWS密钥，这会导致密钥泄露，引发安全风险。推荐安全方案：

• 后端代理：前端调用自有后端接口，由后端处理所有S3操作，前端无需接触密钥
• AWS Cognito身份池：通过Cognito为前端用户生成临时访问凭证，仅授予S3必要权限

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