如何修复Azure Blob Storage模块未导出StorageSharedKeyCredential的错误？

问题描述 #

使用React+JSX+Vite开发Azure Blob Storage文件上传组件时，执行以下导入代码报错：

import {
    BlobServiceClient, StorageSharedKeyCredential
} from '@azure/storage-blob';

控制台报错：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@azure_storage-blob.js?v=450ffe39' does not provide an export named 'StorageSharedKeyCredential' (at Files.jsx:19:29)

已尝试删除package-lock.json、执行npx rimraf ./**/node_modules后重新npm install，问题未解决。

原因分析 #

1. 安全限制：StorageSharedKeyCredential依赖存储账户密钥，前端环境直接使用会暴露密钥，引发严重数据泄露风险。新版@azure/storage-blob（v12+）在浏览器构建中特意移除了该API的导出。
2. 版本兼容性：若使用最新版@azure/storage-blob，该API的导出结构已调整，不再从主包直接导出。

解决方案 #

方案1：使用安全的前端认证方式（推荐） #

前端禁止使用StorageSharedKeyCredential，改用以下两种合规方式：

方式A：SAS Token认证

生成带上传权限的SAS Token，通过它初始化BlobServiceClient（建议从后端获取SAS Token，避免前端硬编码）：

import { BlobServiceClient } from '@azure/storage-blob';

const storageAccountName = "你的存储账户名";
const sasToken = "你的SAS Token";

const blobServiceClient = new BlobServiceClient(
  `https://${storageAccountName}.blob.core.windows.net?${sasToken}`
);

// 示例上传逻辑
async function uploadFile(file) {
  const containerClient = blobServiceClient.getContainerClient("你的容器名");
  const blockBlobClient = containerClient.getBlockBlobClient(file.name);
  await blockBlobClient.uploadData(file);
}

方式B：Azure AD认证

通过@azure/identity库获取认证令牌，实现安全访问：

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

const storageAccountName = "你的存储账户名";
const blobServiceClient = new BlobServiceClient(
  `https://${storageAccountName}.blob.core.windows.net`,
  new DefaultAzureCredential()
);

方案2：非前端环境使用（仅限后端/测试） #

如果是在后端或测试环境中需要使用该API，可安装兼容版本的包：

npm install @azure/storage-blob@12.17.0

安装完成后重新尝试导入即可。

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