Vite+React集成AWS S3遇504错误：net::ERR_ABORTED (Outdated Optimize Dep)

我在开发基于Vite和React的项目，尝试集成AWS S3实现图片上传功能，已通过@aws-sdk/client-s3包引入AWS SDK，但本地服务器运行时控制台出现如下错误：

GET http://localhost:5173/node_modules/.vite/deps/@aws-sdk_client-s3.js?v=08d883e2 net::ERR_ABORTED 504 (Outdated Optimize Dep)

相关代码如下：

import AWS from '@aws-sdk/client-s3';
import { v4 as uuidv4 } from 'uuid';
import { dataUrlToBlob } from './dataUrlToBlob';

const s3 = new AWS.S3Client({
    credentials: 
        {
            accessKeyId: import.meta.env.VITE_APP_AWS_ACCESS_KEY_ID,
            secretAccessKey: import.meta.env.VITE_APP_AWS_SECRET_ACCESS_KEY,
            region: import.meta.env.VITE_APP_AWS_REGION
        }
});

export async function uploadImageToS3(dataUrl, filename) {
    const blob = dataUrlToBlob(dataUrl);
    const uniqueFilename = `${uuidv4()}-${filename}`;

    const params = {
        Bucket: import.meta.env.VITE_APP_AWS_BUCKET_NAME,
        Key: uniqueFilename,
        Body: blob,
        ContentType: blob.type,
        ACL: 'public-read'
    };

    const command = new AWS.PutObjectCommand(params)

    try {
        // const data = await s3.send(command);
        console.log(`Image uploaded successfully at ${data} location - ${data.Location} key - ${data.key}`);
    } catch (error) {
        console.log(`Failed to upload image to S3: ${error}`);
    }
}

解决方法 #

• 清理Vite缓存并重启服务
  停止当前Vite开发服务器，删除项目根目录下的node_modules/.vite文件夹，然后重新执行npm run dev启动服务。该错误多由Vite依赖优化缓存过期导致，清理缓存可强制Vite重新生成依赖优化文件。

• 调整AWS SDK导入方式
  将整体导入改为按需导入，减少依赖体积的同时规避缓存问题：

  // 替换原导入语句
  import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
  
  // 初始化客户端时直接使用S3Client
  const s3 = new S3Client({
      credentials: {
          accessKeyId: import.meta.env.VITE_APP_AWS_ACCESS_KEY_ID,
          secretAccessKey: import.meta.env.VITE_APP_AWS_SECRET_ACCESS_KEY,
          region: import.meta.env.VITE_APP_AWS_REGION
      }
  });
  
  // 创建命令时直接使用PutObjectCommand
  const command = new PutObjectCommand(params);
  

• 更新依赖版本
  执行npm update vite @aws-sdk/client-s3，更新到最新稳定版本，新版本可能修复了依赖优化相关的已知bug。

• 临时禁用依赖优化
  若上述方法无效，可在vite.config.js中临时禁用依赖优化（会影响开发速度，仅作测试用）：

  export default {
    optimizeDeps: {
      disabled: true
    }
  }
  

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